50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T282a,"use client" import { useCallback, useRef, type ComponentProps } from "react" import { differenceInMonths, parse } from "date-fns" import { BriefcaseBusinessIcon, InfinityIcon } from "lucide-react" import ReactMarkdown from "react-markdown" import { cn } from "@/lib/utils" import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible" import { Separator } from "@/components/ui/separator" import type { ChevronsUpDownIconHandle } from "@/registry/components/chevrons-up-down-icon" import { ChevronsUpDownIcon } from "@/registry/components/chevrons-up-down-icon" export type ExperiencePositionItemType = { /** Unique identifier for the position */ id: string /** The job title or position name */ title: string /** * Employment period of the position. * Use "MM.YYYY" or "YYYY" format. Omit `end` for current roles. */ employmentPeriod: { /** Start date (e.g., "10.2022" or "2020"). */ start: string /** End date; leave undefined for "Present". */ end?: string } /** The type of employment (e.g., "Full-time", "Part-time", "Contract") */ employmentType?: string /** A brief description of the position or responsibilities */ description?: string /** An icon representing the position */ icon?: React.ReactElement /** A list of skills associated with the position */ skills?: string[] /** Indicates if the position details are expanded in the UI */ isExpanded?: boolean } export type ExperienceItemType = { /** Unique identifier for the experience item */ id: string /** Name of the company where the experience was gained */ companyName: string /** URL or path to the company's logo image */ companyLogo?: string /** URL to the company's website. */ companyWebsite?: string /** * List of positions held at the company * @fumadocsHref #experiencepositionitemtype * */ positions: ExperiencePositionItemType[] /** Indicates if this is the user's current employer */ isCurrentEmployer?: boolean } export type WorkExperienceProps = { className?: string /** @fumadocsHref #experienceitemtype */ experiences: ExperienceItemType[] } export function WorkExperience({ className, experiences, }: WorkExperienceProps) { return (

{experiences.map((experience) => ( ))}

) } export type ExperienceItemProps = { experience: ExperienceItemType } export function ExperienceItem({ experience }: ExperienceItemProps) { return (

{experience.companyLogo ? ( {experience.companyName}

) : ( )}

{experience.companyWebsite ? ( {experience.companyName} ) : ( experience.companyName )}

{experience.isCurrentEmployer && ( )}

{experience.positions.map((position) => ( ))}

) } export type ExperiencePositionItemProps = { position: ExperiencePositionItemType } export function ExperiencePositionItem({ position, }: ExperiencePositionItemProps) { const chevronsUpDownIconRef = useRef(null) const handleOpenChange = useCallback((open: boolean) => { const controls = chevronsUpDownIconRef.current if (!controls) return if (open) { controls.startAnimation() } else { controls.stopAnimation() } }, []) const { start, end } = position.employmentPeriod const isOngoing = !end const duration = formatDuration(start, end) return (

{position.icon ?? }

{position.title}

{/* Separators are aria-hidden: a dl may only expose dt/dd groups, and these dividers are decorative. */}

Employment Type: {position.employmentType}
Employment Period: {start} — {isOngoing ? ( ) : ( {end} )}
Duration: {duration}

{position.description && ( {position.description} )} {Array.isArray(position.skills) && position.skills.length > 0 && (

{skill}

)} ) } function Prose({ className, ...props }: ComponentProps<"div">) { return (

) } function Skill({ className, ...props }: ComponentProps<"span">) { return ( ) } function formatDuration(start: string, end?: string): string { const startHasMonth = start.includes(".") const endHasMonth = end ? end.includes(".") : true // Both year-only: granularity is years, no month arithmetic needed. if (!startHasMonth && end && !endHasMonth) { const years = parseInt(end, 10) - parseInt(start, 10) if (years <= 0) { return "" } return `${years}y` } const startDate = parsePeriodDate(start, "first") const endDate = end ? parsePeriodDate(end, "last") : new Date() // +1 to count both the start and end months inclusively. const totalMonths = differenceInMonths(endDate, startDate) + 1 if (totalMonths <= 0) { return "" } if (totalMonths < 12) { return `${totalMonths}m` } const years = Math.floor(totalMonths / 12) const months = totalMonths % 12 if (months === 0) { return `${years}y` } return `${years}y ${months}m` } function parsePeriodDate(str: string, fallbackMonth: "first" | "last"): Date { if (str.includes(".")) { return parse(str, "MM.yyyy", new Date()) } return parse( `${fallbackMonth === "last" ? "12" : "01"}.${str}`, "MM.yyyy", new Date() ) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-markdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-markdown"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@ncdai","registryDependencies":["collapsible","separator","https://chanhdai.com/r/chevrons-up-down-icon.json","https://chanhdai.com/r/typography.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/work-experience/work-experience.tsx","content":"$52","type":"registry:component","target":"@components/work-experience.tsx"}],"className":"h-[70svh] min-h-80"}]]}]