ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-12 13:36:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

extract dev profiles

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-12 12:45:27 +02:00
parent d0532336ce
commit e103c8a354
2 changed files with 72 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/DevProfile.tsx Normal file
View file

@ -0,0 +1,37 @@
import React, {FC} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCheck} from '@fortawesome/free-solid-svg-icons';
interface IProps {
name: string;
description: string;
location: string;
skills: string[];
}
const DevProfile: FC<IProps> = ({name, description, location, skills}) => (
<div className="profile bg-light">
<img
src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
alt="Some guy"
className="round-img"
/>
<div>
<h2>{name}</h2>
<p>{description}</p>
<p>{location}</p>
<a href="profile.html" className="btn btn-primary">
View Profile
</a>
</div>
<ul>
{skills.map((s, i) => (
<li className="text-primary">
<FontAwesomeIcon icon={faCheck} /> {s}
</li>
))}
</ul>
</div>
);
export default DevProfile;

76
src/pages/Developers.tsx
View file

@ -1,48 +1,42 @@
import React from 'react';
import React, {FC} from 'react';
import Header from '../components/Header';
import DevProfile from '../components/DevProfile';
const Developers = () => (
<section className="container">
<Header
title="Developers"
lead="Browse and connect with developers"
icon="connectdevelop"
/>
// interface IProps {
// developers: []
// }
<div className="profiles">
<div className="profile bg-light">
<img
src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
alt="Some guy"
className="round-img"
/>
<div>
<h2>John Doe</h2>
<p>Developer at Microsoft</p>
<p>Seattle, WA</p>
<a href="profile.html" className="btn btn-primary">
View Profile
</a>
</div>
<ul>
<li className="text-primary">
<i className="fa fa-check">HTML</i>
</li>
// const Developers: FC<IProps> = ({developers}) => (
const Developers: FC = () => {
const developers = [
{
name: 'John Doe',
description: 'Developer at Microsoft',
location: 'Seattle, WA',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
},
];
<li className="text-primary">
<i className="fa fa-check">CSS</i>
</li>
<li className="text-primary">
<i className="fa fa-check">JavaScript</i>
</li>
<li className="text-primary">
<i className="fa fa-check">Python</i>
</li>
</ul>
return (
<section className="container">
<Header
title="Developers"
lead="Browse and connect with developers"
icon="connectdevelop"
/>
<div className="profiles">
{developers.map((dev, i) => (
<DevProfile
key={i}
name={dev.name}
description={dev.description}
location={dev.location}
skills={dev.skills}
/>
))}
</div>
</div>
</section>
);
</section>
);
};
export default Developers;