Work Experience

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