{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "work-experience",
  "title": "Work Experience",
  "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
  "description": "Display work experiences with role details, company logos, and durations.",
  "dependencies": [
    "react-markdown",
    "lucide-react"
  ],
  "devDependencies": [
    "@tailwindcss/typography"
  ],
  "registryDependencies": [
    "collapsible",
    "separator",
    "https://xhakil.vercel.app/r/typography.json"
  ],
  "files": [
    {
      "path": "src/registry/components/work-experience/work-experience.tsx",
      "content": "import {\r\n  BriefcaseBusinessIcon,\r\n  ChevronsDownUpIcon,\r\n  ChevronsUpDownIcon,\r\n} from \"lucide-react\"\r\nimport Image from \"next/image\"\r\nimport type { ComponentProps, ComponentType } 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\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 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?: ComponentType<ComponentProps<\"svg\">>\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  /**\r\n   * List of positions held at the company\r\n   * @fumadocsHref #experiencepositionitemtype\r\n   * */\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 type WorkExperienceProps = {\r\n  className?: string\r\n  /** @fumadocsHref #experienceitemtype */\r\n  experiences: ExperienceItemType[]\r\n}\r\n\r\nexport function WorkExperience({\r\n  className,\r\n  experiences,\r\n}: WorkExperienceProps) {\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 type ExperienceItemProps = {\r\n  experience: ExperienceItemType\r\n}\r\n\r\nexport function ExperienceItem({ experience }: ExperienceItemProps) {\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 className=\"flex size-6 shrink-0 items-center justify-center\">\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              aria-hidden\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 type ExperiencePositionItemProps = {\r\n  position: ExperiencePositionItemType\r\n}\r\n\r\nexport function ExperiencePositionItem({\r\n  position,\r\n}: ExperiencePositionItemProps) {\r\n  const ExperienceIcon = position.icon ?? BriefcaseBusinessIcon // iconMap[position.icon || \"business\"]\r\n\r\n  return (\r\n    <Collapsible\r\n      defaultOpen={position.isExpanded}\r\n      disabled={!position.description}\r\n      asChild\r\n    >\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/30\",\r\n            \"data-disabled:before:content-none\"\r\n          )}\r\n        >\r\n          <div className=\"relative z-1 mb-1 flex items-center gap-3\">\r\n            <div\r\n              className={cn(\r\n                \"flex size-6 shrink-0 items-center justify-center rounded-lg\",\r\n                \"bg-muted text-muted-foreground\",\r\n                \"border border-muted-foreground/15 ring-1 ring-edge ring-offset-1 ring-offset-background\"\r\n              )}\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 className=\"shrink-0 text-muted-foreground group-disabled:hidden [&_svg]:size-4\">\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-vertical:h-4 data-vertical:self-center\"\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\">\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 }: ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"prose prose-sm max-w-none prose-shakil-ahmed-billal font-mono text-foreground prose-zinc dark:prose-invert\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction Skill({ className, ...props }: 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"
    }
  ],
  "docs": "https://xhakil.vercel.app/components/work-experience",
  "type": "registry:component"
}