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