Work Experience

1import {
2  BriefcaseBusinessIcon,
3  ChevronsDownUpIcon,
4  ChevronsUpDownIcon,
5  CodeXmlIcon,
6  DraftingCompassIcon,
7  GraduationCapIcon,
8} from "lucide-react";
9import Image from "next/image";
10import React from "react";
11import ReactMarkdown from "react-markdown";
12 
13import {
14  Collapsible,
15  CollapsibleContent,
16  CollapsibleTrigger,
17} from "@/components/ui/collapsible";
18import { Separator } from "@/components/ui/separator";
19import { cn } from "@/lib/utils";
20 
21const iconMap = {
22  code: CodeXmlIcon,
23  design: DraftingCompassIcon,
24  business: BriefcaseBusinessIcon,
25  education: GraduationCapIcon,
26} as const;
27 
28/**
29 * Represents the valid keys of the `iconMap` object, used to specify the type of icon
30 * associated with an experience position.
31 */
32export type ExperiencePositionIconType = keyof typeof iconMap;
33 
34export type ExperiencePositionItemType = {
35  /** Unique identifier for the position */
36  id: string;
37  /** The job title or position name */
38  title: string;
39  /** The period during which the position was held (e.g., "Jan 2020 - Dec 2021") */
40  employmentPeriod: string;
41  /** The type of employment (e.g., "Full-time", "Part-time", "Contract") */
42  employmentType?: string;
43  /** A brief description of the position or responsibilities */
44  description?: string;
45  /** An icon representing the position */
46  icon?: ExperiencePositionIconType;
47  /** A list of skills associated with the position */
48  skills?: string[];
49  /** Indicates if the position details are expanded in the UI */
50  isExpanded?: boolean;
51};
52 
53export type ExperienceItemType = {
54  /** Unique identifier for the experience item */
55  id: string;
56  /** Name of the company where the experience was gained */
57  companyName: string;
58  /** URL or path to the company's logo image */
59  companyLogo?: string;
60  /** List of positions held at the company */
61  positions: ExperiencePositionItemType[];
62  /** Indicates if this is the user's current employer */
63  isCurrentEmployer?: boolean;
64};
65 
66export function WorkExperience({
67  className,
68  experiences,
69}: {
70  className?: string;
71  experiences: ExperienceItemType[];
72}) {
73  return (
74    <div className={cn("bg-background px-4", className)}>
75      {experiences.map((experience) => (
76        <ExperienceItem key={experience.id} experience={experience} />
77      ))}
78    </div>
79  );
80}
81 
82export function ExperienceItem({
83  experience,
84}: {
85  experience: ExperienceItemType;
86}) {
87  return (
88    <div className="space-y-4 py-4">
89// … truncated