{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "work-experience",
  "title": "Work Experience",
  "author": "ramanak <ramanak.dev@gmail.com>",
  "description": "Displays a list of work experiences with role details and durations.",
  "dependencies": [
    "react-markdown",
    "lucide-react"
  ],
  "devDependencies": [
    "@tailwindcss/typography",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "@ramanak/utils",
    "collapsible",
    "separator"
  ],
  "files": [
    {
      "path": "src/registry/work-experience/work-experience.tsx",
      "content": "import {\r\n  BriefcaseBusinessIcon,\r\n  ChevronsDownUpIcon,\r\n  ChevronsUpDownIcon,\r\n  CodeXmlIcon,\r\n  DraftingCompassIcon,\r\n  GraduationCapIcon,\r\n} from \"lucide-react\"\r\nimport Image from \"next/image\"\r\nimport React from \"react\"\r\nimport ReactMarkdown from \"react-markdown\"\r\n\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst iconMap = {\r\n  code: CodeXmlIcon,\r\n  design: DraftingCompassIcon,\r\n  business: BriefcaseBusinessIcon,\r\n  education: GraduationCapIcon,\r\n} as const\r\n\r\n/**\r\n * Represents the valid keys of the `iconMap` object, used to specify the type of icon\r\n * associated with an experience position.\r\n */\r\nexport type ExperiencePositionIconType = keyof typeof iconMap\r\n\r\nexport type ExperiencePositionItemType = {\r\n  /** Unique identifier for the position */\r\n  id: string\r\n  /** The job title or position name */\r\n  title: string\r\n  /** The period during which the position was held (e.g., \"Jan 2020 - Dec 2021\") */\r\n  employmentPeriod: string\r\n  /** The type of employment (e.g., \"Full-time\", \"Part-time\", \"Contract\") */\r\n  employmentType?: string\r\n  /** A brief description of the position or responsibilities */\r\n  description?: string\r\n  /** An icon representing the position */\r\n  icon?: ExperiencePositionIconType\r\n  /** A list of skills associated with the position */\r\n  skills?: string[]\r\n  /** Indicates if the position details are expanded in the UI */\r\n  isExpanded?: boolean\r\n}\r\n\r\nexport type ExperienceItemType = {\r\n  /** Unique identifier for the experience item */\r\n  id: string\r\n  /** Name of the company where the experience was gained */\r\n  companyName: string\r\n  /** URL or path to the company's logo image */\r\n  companyLogo?: string\r\n  /** List of positions held at the company */\r\n  positions: ExperiencePositionItemType[]\r\n  /** Indicates if this is the user's current employer */\r\n  isCurrentEmployer?: boolean\r\n}\r\n\r\nexport function WorkExperience({\r\n  className,\r\n  experiences,\r\n}: {\r\n  className?: string\r\n  experiences: ExperienceItemType[]\r\n}) {\r\n  return (\r\n    <div className={cn(\"bg-background px-4\", className)}>\r\n      {experiences.map((experience) => (\r\n        <ExperienceItem key={experience.id} experience={experience} />\r\n      ))}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport function ExperienceItem({\r\n  experience,\r\n}: {\r\n  experience: ExperienceItemType\r\n}) {\r\n  return (\r\n    <div className=\"space-y-4 py-4\">\r\n      <div className=\"not-prose flex items-center gap-3\">\r\n        <div\r\n          className=\"flex size-6 shrink-0 items-center justify-center\"\r\n          aria-hidden\r\n        >\r\n          {experience.companyLogo ? (\r\n            <Image\r\n              src={experience.companyLogo}\r\n              alt={experience.companyName}\r\n              width={24}\r\n              height={24}\r\n              quality={100}\r\n              className=\"rounded-full\"\r\n              unoptimized\r\n            />\r\n          ) : (\r\n            <span className=\"flex size-2 rounded-full bg-zinc-300 dark:bg-zinc-600\" />\r\n          )}\r\n        </div>\r\n\r\n        <h3 className=\"text-lg leading-snug font-medium text-foreground\">\r\n          {experience.companyName}\r\n        </h3>\r\n\r\n        {experience.isCurrentEmployer && (\r\n          <span className=\"relative flex items-center justify-center\">\r\n            <span className=\"absolute inline-flex size-3 animate-ping rounded-full bg-info opacity-50\" />\r\n            <span className=\"relative inline-flex size-2 rounded-full bg-info\" />\r\n            <span className=\"sr-only\">Current Employer</span>\r\n          </span>\r\n        )}\r\n      </div>\r\n\r\n      <div className=\"relative space-y-4 before:absolute before:left-3 before:h-full before:w-px before:bg-border\">\r\n        {experience.positions.map((position) => (\r\n          <ExperiencePositionItem key={position.id} position={position} />\r\n        ))}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport function ExperiencePositionItem({\r\n  position,\r\n}: {\r\n  position: ExperiencePositionItemType\r\n}) {\r\n  const ExperienceIcon = iconMap[position.icon || \"business\"]\r\n\r\n  return (\r\n    <Collapsible defaultOpen={position.isExpanded} asChild>\r\n      <div className=\"relative last:before:absolute last:before:h-full last:before:w-4 last:before:bg-background\">\r\n        <CollapsibleTrigger\r\n          className={cn(\r\n            \"group not-prose block w-full text-left select-none\",\r\n            \"relative before:absolute before:-top-1 before:-right-1 before:-bottom-1.5 before:left-7 before:rounded-lg hover:before:bg-muted/50\"\r\n          )}\r\n        >\r\n          <div className=\"relative z-1 mb-1 flex items-center gap-3\">\r\n            <div\r\n              className=\"flex size-6 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground\"\r\n              aria-hidden\r\n            >\r\n              <ExperienceIcon className=\"size-4\" />\r\n            </div>\r\n\r\n            <h4 className=\"flex-1 text-base font-medium text-balance text-foreground\">\r\n              {position.title}\r\n            </h4>\r\n\r\n            <div\r\n              className=\"shrink-0 text-muted-foreground [&_svg]:size-4\"\r\n              aria-hidden\r\n            >\r\n              <ChevronsDownUpIcon className=\"hidden group-data-[state=open]:block\" />\r\n              <ChevronsUpDownIcon className=\"hidden group-data-[state=closed]:block\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"relative z-1 flex items-center gap-2 pl-9 text-sm text-muted-foreground\">\r\n            {position.employmentType && (\r\n              <>\r\n                <dl>\r\n                  <dt className=\"sr-only\">Employment Type</dt>\r\n                  <dd>{position.employmentType}</dd>\r\n                </dl>\r\n\r\n                <Separator\r\n                  className=\"data-[orientation=vertical]:h-4\"\r\n                  orientation=\"vertical\"\r\n                />\r\n              </>\r\n            )}\r\n\r\n            <dl>\r\n              <dt className=\"sr-only\">Employment Period</dt>\r\n              <dd>{position.employmentPeriod}</dd>\r\n            </dl>\r\n          </div>\r\n        </CollapsibleTrigger>\r\n\r\n        <CollapsibleContent className=\"overflow-hidden duration-300 data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\r\n          {position.description && (\r\n            <Prose className=\"pt-2 pl-9\">\r\n              <ReactMarkdown>{position.description}</ReactMarkdown>\r\n            </Prose>\r\n          )}\r\n        </CollapsibleContent>\r\n\r\n        {Array.isArray(position.skills) && position.skills.length > 0 && (\r\n          <ul className=\"not-prose flex flex-wrap gap-1.5 pt-3 pl-9\">\r\n            {position.skills.map((skill, index) => (\r\n              <li key={index} className=\"flex\">\r\n                <Skill>{skill}</Skill>\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </div>\r\n    </Collapsible>\r\n  )\r\n}\r\n\r\nfunction Prose({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"prose prose-sm max-w-none font-mono text-foreground prose-zinc dark:prose-invert\",\r\n        \"prose-a:font-medium prose-a:wrap-break-word prose-a:text-foreground prose-a:underline prose-a:underline-offset-4\",\r\n        \"prose-code:rounded-md prose-code:border prose-code:bg-muted/50 prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:text-sm prose-code:font-normal prose-code:before:content-none prose-code:after:content-none\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction Skill({ className, ...props }: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <span\r\n      className={cn(\r\n        \"inline-flex items-center rounded-lg border bg-muted/50 px-1.5 py-0.5 font-mono text-xs text-muted-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "muted": "oklch(0.967 0.001 286.375)",
      "muted-foreground": "oklch(0.552 0.016 285.938)",
      "border": "oklch(0.92 0.004 286.32)"
    },
    "dark": {
      "background": "oklch(0.141 0.005 285.823)",
      "muted": "oklch(0.274 0.006 286.033)",
      "muted-foreground": "oklch(0.705 0.015 286.067)",
      "border": "oklch(0.274 0.006 286.033)"
    }
  },
  "css": {
    "@import \"tw-animate-css\"": {},
    "@plugin @tailwindcss/typography": {}
  },
  "docs": "https://www.ramana.dev/components/work-experience-component",
  "type": "registry:component"
}