mirror of
https://github.com/rjNemo/devbook_ts
synced 2026-06-08 19:46:45 +00:00
309ee76a32
* edit github workflows * document Altert type * add firestore reducer * connect developers profile to store * switch picture field to avatarUrl * handle document uid * add param to profile route * use id parameter for profile * redirect to notfound page if dev is null * wait for profile to be loaded before displaying profile * add Dev class, IDev interface, remove blankDev and getDescription method * profile-top * format social links * profile-about * profile description * add placeholders to profile * alt tag on placeholders * deploy.yml
44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React, {FC} from 'react';
|
|
// Routing
|
|
import {Link} from 'react-router-dom';
|
|
// Style
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faCheck} from '@fortawesome/free-solid-svg-icons';
|
|
// Typing
|
|
import {DevSummary, getDescription} from '../models/Dev';
|
|
import Routes from '../constants/routes';
|
|
|
|
/**
|
|
* Present a dev profile succintly. Redirect to dev profile on click.
|
|
* @param props DevSummary object
|
|
*/
|
|
const DevProfile: FC<DevSummary> = ({
|
|
id,
|
|
displayName,
|
|
avatarUrl,
|
|
status,
|
|
company,
|
|
location,
|
|
skills,
|
|
}) => (
|
|
<div className="profile bg-light">
|
|
<img src={avatarUrl} alt={displayName} className="round-img" />
|
|
<div>
|
|
<h2>{displayName}</h2>
|
|
<p>{getDescription(status, company)}</p>
|
|
<p>{location}</p>
|
|
<Link to={`${Routes.PROFILE}/${id}`} className="btn btn-primary">
|
|
View Profile
|
|
</Link>
|
|
</div>
|
|
<ul>
|
|
{skills?.map((s, i) => (
|
|
<li className="text-primary" key={i}>
|
|
<FontAwesomeIcon icon={faCheck} /> {s}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
export default DevProfile;
|