Work Experience

1"use client"
2 
3import { useCallback, useRef, type ComponentProps } from "react"
4import { differenceInMonths, parse } from "date-fns"
5import ReactMarkdown from "react-markdown"
6 
7import { cn } from "@/lib/utils"
8import {
9  Collapsible,
10  CollapsibleContent,
11  CollapsibleTrigger,
12} from "@/components/ui/collapsible"
13import { Separator } from "@/components/ui/separator"
14import type { ChevronsUpDownIconHandle } from "@/registry/components/chevrons-up-down-icon"
15import { ChevronsUpDownIcon } from "@/registry/components/chevrons-up-down-icon"
16import { IconPlaceholder } from "@/registry/icons/icon-placeholder"
17 
18export type ExperiencePositionItemType = {
19  /** Unique identifier for the position */
20  id: string
21  /** The job title or position name */
22  title: string
23  /**
24   * Employment period of the position.
25   * Use "MM.YYYY" or "YYYY" format. Omit `end` for current roles.
26   */
27  employmentPeriod: {
28    /** Start date (e.g., "10.2022" or "2020"). */
29    start: string
30    /** End date; leave undefined for "Present". */
31    end?: string
32  }
33  /** The type of employment (e.g., "Full-time", "Part-time", "Contract") */
34  employmentType?: string
35  /** A brief description of the position or responsibilities */
36  description?: string
37  /** An icon representing the position */
38  icon?: React.ReactElement
39  /** A list of skills associated with the position */
40  skills?: string[]
41  /** Indicates if the position details are expanded in the UI */
42  isExpanded?: boolean
43}
44 
45export type ExperienceItemType = {
46  /** Unique identifier for the experience item */
47  id: string
48  /** Name of the company where the experience was gained */
49  companyName: string
50  /** URL or path to the company's logo image */
51  companyLogo?: string
52  /** URL to the company's website. */
53  companyWebsite?: string
54  /**
55   * List of positions held at the company
56   * @fumadocsHref #experiencepositionitemtype
57   * */
58  positions: ExperiencePositionItemType[]
59  /** Indicates if this is the user's current employer */
60  isCurrentEmployer?: boolean
61}
62 
63export type WorkExperienceProps = {
64  className?: string
65  /** @fumadocsHref #experienceitemtype */
66  experiences: ExperienceItemType[]
67}
68 
69export function WorkExperience({
70  className,
71  experiences,
72}: WorkExperienceProps) {
73  return (
74    <div className={cn("bg-background px-4 text-foreground", className)}>
75      {experiences.map((experience) => (
76        <ExperienceItem key={experience.id} experience={experience} />
77      ))}
78    </div>
79  )
80}
81 
82// … truncated