My personal website
renderg.host
1import { Link } from '@/components/Link/Link';
2import { Tags } from '@/components/Tags/Tags';
3import { useProtopro } from '@/hooks/atproto';
4import type { JSX } from 'react';
5import { Heading } from '../Heading/Heading';
6import { Paragraph } from '../Paragraph/Paragraph';
7import { CONNECT_LINKS, PROFILE, SECTIONS } from './TLDRProfile.constants';
8import * as styles from './TLDRProfile.styles';
9
10/**
11 * TL;DR Profile sidebar component
12 *
13 * @returns JSX element with profile photo and summary information
14 */
15export default function TLDRProfile(): JSX.Element {
16 const { data: profile } = useProtopro();
17
18 return (
19 <div className={styles.container}>
20 <div className={styles.innerContainer}>
21 <img src={PROFILE.avatarSrc} alt={PROFILE.name} className={styles.avatar} />
22
23 <div className={styles.infoSection}>
24 <Heading level={3} size="md">
25 {PROFILE.name}
26 </Heading>
27 <Paragraph size="base">{PROFILE.location}</Paragraph>
28 <Paragraph size="base">{profile?.overview || PROFILE.title}</Paragraph>
29 {/* <Paragraph size="base">{PROFILE.experience}</Paragraph> */}
30 </div>
31
32 {profile?.skills && profile.skills.length > 0 && (
33 <div className={styles.section}>
34 <Heading level={4} size="base">
35 {SECTIONS.skills}
36 </Heading>
37 <Tags tags={[...profile.skills].sort().join(', ')} className="flex-wrap" />
38 </div>
39 )}
40
41 {profile?.languages && profile.languages.length > 0 && (
42 <div className={styles.section}>
43 <Heading level={4} size="base">
44 {SECTIONS.languages}
45 </Heading>
46 <Tags
47 tags={[...profile.languages]
48 .map((lang) => lang.code)
49 .sort()
50 .join(', ')}
51 className="flex-wrap"
52 />
53 </div>
54 )}
55
56 <div className={styles.section}>
57 <Heading level={4} size="base">
58 {SECTIONS.connect}
59 </Heading>
60
61 <div className={styles.connectLinks}>
62 {CONNECT_LINKS.map((link) => (
63 <Link key={link.href} href={link.href} target="_blank" rel="noopener noreferrer">
64 {link.label}
65 </Link>
66 ))}
67 </div>
68 </div>
69 </div>
70 </div>
71 );
72}