{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "project-showcase",
  "type": "registry:component",
  "title": "Project Showcase",
  "description": "A hover-preview project list that morphs into a detail page.",
  "dependencies": [
    "lucide-react@^0.577.0",
    "motion@^14.0.0"
  ],
  "registryDependencies": [
    "@dx/utils"
  ],
  "files": [
    {
      "path": "dx/project-showcase.tsx",
      "type": "registry:component",
      "target": "components/dx/project-showcase.tsx",
      "content": "import * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport { ArrowLeftIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type ShowcaseProject = {\n  id: string;\n  title: string;\n  /** Image URL. */\n  image: string;\n  /** Heading shown above the description in the detail view. */\n  tagline?: string;\n  description?: React.ReactNode;\n  /** Buttons or links shown at the end of the detail view. */\n  actions?: React.ReactNode;\n};\n\nexport type ProjectShowcaseProps = Omit<React.ComponentProps<\"section\">, \"onChange\" | \"defaultValue\"> & {\n  projects: ShowcaseProject[];\n  /** Label above the list. */\n  label?: React.ReactNode;\n  /** Id of the open project, or null for the list. */\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (id: string | null) => void;\n  /** Let the floating preview be dragged around. */\n  draggable?: boolean;\n};\n\nconst radius = { borderRadius: 24 };\n\nfunction ProjectShowcase({\n  projects,\n  label = \"Selected work\",\n  value,\n  defaultValue = null,\n  onValueChange,\n  draggable = true,\n  className,\n  ...props\n}: ProjectShowcaseProps) {\n  const uid = React.useId();\n  const area = React.useRef<HTMLElement>(null);\n  const [inner, setInner] = React.useState<string | null>(defaultValue);\n  const openId = value !== undefined ? value : inner;\n  const setOpen = React.useCallback(\n    (id: string | null) => {\n      if (value === undefined) setInner(id);\n      onValueChange?.(id);\n    },\n    [value, onValueChange],\n  );\n  const [hover, setHover] = React.useState(0);\n\n  const openIndex = projects.findIndex((p) => p.id === openId);\n  const open = openIndex >= 0 ? projects[openIndex] : null;\n  const shown = projects[open ? openIndex : hover] ?? projects[0];\n\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(null);\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [open, setOpen]);\n\n  return (\n    <section\n      ref={area}\n      data-slot=\"project-showcase\"\n      className={cn(\"relative h-[620px] w-full overflow-x-hidden overflow-y-auto overscroll-contain scrollbar-hover\", className)}\n      {...props}\n    >\n      {!open ? (\n        <div className=\"relative size-full min-h-[460px]\">\n          <motion.img\n            drag={draggable}\n            dragConstraints={area}\n            dragElastic={0.15}\n            dragMomentum={false}\n            layoutId={`${uid}-img`}\n            style={radius}\n            src={shown.image}\n            alt=\"\"\n            draggable={false}\n            className={cn(\n              \"absolute top-[8%] left-[6%] aspect-video w-[min(22rem,55%)] border border-outline-variant object-cover shadow-lg\",\n              draggable && \"cursor-grab active:cursor-grabbing\",\n            )}\n          />\n          <ul className=\"absolute right-[6%] bottom-[10%] flex flex-col gap-1.5\">\n            <li aria-hidden className=\"mb-1 flex items-center gap-3 text-xs tracking-[0.18em] text-muted-foreground uppercase\">\n              {label}\n              <span className=\"h-px flex-1 bg-current\" />\n            </li>\n            {projects.map((p, i) => (\n              <li key={p.id}>\n                <motion.button\n                  type=\"button\"\n                  layoutId={`${uid}-title-${p.id}`}\n                  onPointerEnter={() => setHover(i)}\n                  onFocus={() => setHover(i)}\n                  onClick={() => setOpen(p.id)}\n                  className={cn(\n                    \"relative flex w-fit items-center text-3xl font-medium tracking-tighter outline-none transition-opacity sm:text-4xl\",\n                    \"focus-visible:underline focus-visible:decoration-2 focus-visible:underline-offset-4\",\n                    hover === i ? \"opacity-100\" : \"opacity-45\",\n                  )}\n                >\n                  {p.title}\n                  {hover === i && (\n                    <motion.span\n                      aria-hidden\n                      initial={{ x: 10, width: 15, height: 0 }}\n                      animate={{ x: 10, width: 5, height: 5 }}\n                      transition={{ duration: 0.2 }}\n                      className=\"absolute left-full rounded-full bg-current\"\n                    />\n                  )}\n                </motion.button>\n              </li>\n            ))}\n          </ul>\n        </div>\n      ) : (\n        <div className=\"mx-auto flex w-full max-w-xl flex-col gap-10 px-6 py-12\">\n          <button\n            type=\"button\"\n            onClick={() => setOpen(null)}\n            className=\"flex w-fit items-center gap-1.5 text-sm text-muted-foreground outline-none hover:text-foreground focus-visible:text-foreground\"\n          >\n            <ArrowLeftIcon className=\"size-4\" /> All projects\n          </button>\n          <div className=\"relative min-h-16\">\n            <motion.h2 layoutId={`${uid}-title-${open.id}`} className=\"w-fit text-5xl font-medium tracking-tighter sm:text-6xl\">\n              {open.title}\n            </motion.h2>\n          </div>\n          <motion.img layoutId={`${uid}-img`} style={radius} src={open.image} alt=\"\" className=\"aspect-video w-full object-cover\" />\n          <motion.div\n              initial=\"hidden\"\n              animate=\"visible\"\n              variants={{\n                hidden: { opacity: 0 },\n                visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.25 } },\n              }}\n              className=\"flex flex-col gap-4\"\n            >\n              {open.tagline && (\n                <motion.div variants={{ hidden: { opacity: 0, y: 6 }, visible: { opacity: 1, y: 0 } }} className=\"flex items-center gap-3\">\n                  <h3 className=\"text-2xl font-semibold tracking-tight\">{open.tagline}</h3>\n                  <motion.span\n                    aria-hidden\n                    initial={{ scaleX: 0 }}\n                    animate={{ scaleX: 1 }}\n                    transition={{ delay: 0.35, duration: 0.5 }}\n                    className=\"h-0.5 flex-1 origin-left rounded-full bg-foreground\"\n                  />\n                </motion.div>\n              )}\n              {open.description && (\n                <motion.div\n                  variants={{ hidden: { opacity: 0, y: 6 }, visible: { opacity: 1, y: 0 } }}\n                  className=\"flex flex-col gap-2 text-sm leading-6 text-muted-foreground\"\n                >\n                  {open.description}\n                </motion.div>\n              )}\n              {open.actions && (\n                <motion.div variants={{ hidden: { opacity: 0, y: 6 }, visible: { opacity: 1, y: 0 } }} className=\"mt-6 flex flex-wrap items-center gap-2.5\">\n                  {open.actions}\n                </motion.div>\n              )}\n            </motion.div>\n        </div>\n      )}\n    </section>\n  );\n}\n\nexport { ProjectShowcase };\n"
    }
  ],
  "categories": [
    "motion"
  ],
  "meta": {
    "group": "dx",
    "docs": "https://dxuireact.com/docs/components/project-showcase"
  }
}