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

lay dashboard top section out

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-12 18:46:37 +02:00
parent 79a97738b5
commit 054e7a80c1
3 changed files with 92 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/models/DevFull.ts
View file

@ -12,4 +12,84 @@ interface DevFull extends DevSummary {
repos: Repo[];
}
/**
* sample DevFull for development and tests
*/
export const dummyDevFull: DevFull = {
id: '0',
name: 'John Doe',
picture:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
description: 'Developer at Microsoft',
location: 'Seattle, WA',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
links: {
web: '#',
instagram: 'http://insta.com',
facebook: '#',
linkedin: '#',
twitter: '#',
github: '#',
},
bio:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',
experiences: [
{
employer: 'Microsoft',
from: new Date(2011, 10),
to: 'Current',
position: 'Senior Developer',
description:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corrupti rem eius, accusantium ipsum vel eveniet magnam voluptatum? Minus, voluptatum!',
},
{
employer: 'Sun Microsystems',
from: new Date(2004, 10),
to: new Date(2010, 11),
position: 'System Admin',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
},
],
educations: [
{
school: 'University of Washington',
from: new Date(1993, 9),
to: new Date(1999, 6),
degree: 'Master',
field: 'Computer Science',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
},
],
repos: [
{
name: 'Repo #1',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
link: '#',
stars: 42,
watchers: 2,
forks: 4,
},
{
name: 'Repo #2',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
link: '#',
stars: 21,
watchers: 1,
forks: 2,
},
{
name: 'Repo #3',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
link: '#',
stars: 50,
watchers: 32,
forks: 12,
},
],
};
export default DevFull;

23
src/pages/Dashboard.tsx
View file

@ -1,24 +1,23 @@
import React from 'react';
import React, {FC} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import Header from '../components/Header';
import DevFull, {dummyDevFull as dev} from '../models/DevFull';
import {faUserCircle, faGraduationCap} from '@fortawesome/free-solid-svg-icons';
import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
const Dashboard = () => {
const Dashboard: FC<DevFull> = () => {
return (
<section className="container">
<h1 className="large text-primary">Dashboard</h1>
<p className="lead">
<i className="fa fa-user"></i> Welcome John
</p>
<Header title="Dashboard" lead={`Welcome ${dev.name}`} />
<div className="dash-buttons">
<a href="create-profile.html" className="btn btn-light">
{' '}
<i className="fa fa-user-circle text-primary"></i> Edit Profile
<FontAwesomeIcon icon={faUserCircle} /> Edit Profile
</a>
<a href="add-experience.html" className="btn btn-light">
{' '}
<i className="fa fa-black-tie text-primary"></i> Add Experience
<FontAwesomeIcon icon={faBlackTie} /> Add Experience
</a>
<a href="add-education.html" className="btn btn-light">
{' '}
<i className="fa fa-graduation-cap text-primary"></i> Add Education
<FontAwesomeIcon icon={faGraduationCap} /> Add Education
</a>
</div>
<h2 className="my-2">Experience Credentials</h2>

80
src/pages/Profile.tsx
View file

@ -15,91 +15,13 @@ import {
faEye,
faCodeBranch,
} from '@fortawesome/free-solid-svg-icons';
import DevFull from '../models/DevFull';
import DevFull, {dummyDevFull as dev} from '../models/DevFull';
import Experience from '../models/Experience';
import {parseDate} from '../types';
import Education from '../models/Education';
import Repo from '../models/Repo';
const Profile: FC<DevFull> = () => {
const dev: DevFull = {
id: '0',
name: 'John Doe',
picture:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
description: 'Developer at Microsoft',
location: 'Seattle, WA',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
links: {
web: '#',
instagram: 'http://insta.com',
facebook: '#',
linkedin: '#',
twitter: '#',
github: '#',
},
bio:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',
experiences: [
{
employer: 'Microsoft',
from: new Date(2011, 10),
to: 'Current',
position: 'Senior Developer',
description:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corrupti rem eius, accusantium ipsum vel eveniet magnam voluptatum? Minus, voluptatum!',
},
{
employer: 'Sun Microsystems',
from: new Date(2004, 10),
to: new Date(2010, 11),
position: 'System Admin',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
},
],
educations: [
{
school: 'University of Washington',
from: new Date(1993, 9),
to: new Date(1999, 6),
degree: 'Master',
field: 'Computer Science',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
},
],
repos: [
{
name: 'Repo #1',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
link: '#',
stars: 42,
watchers: 2,
forks: 4,
},
{
name: 'Repo #2',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
link: '#',
stars: 21,
watchers: 1,
forks: 2,
},
{
name: 'Repo #3',
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
link: '#',
stars: 50,
watchers: 32,
forks: 12,
},
],
};
/** return the icon corresponding to the social name */
const renderSocialIcon = (name: string): IconDefinition => {
switch (name) {