{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slide-footer",
  "title": "Slide footer",
  "description": "Footer for your slides",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "use-mobile"
  ],
  "files": [
    {
      "path": "components/ui/slide-cn/slide-footer.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { useDeck } from \"@/components/ui/slide-cn/deck\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nfunction FooterKeyCap({ children }: { children: React.ReactNode }) {\n\treturn (\n\t\t<span className=\"inline-flex items-center justify-center w-5 h-5 rounded bg-foreground/10 border border-foreground/15 text-[10px] font-mono leading-none\">\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n\n/**\n * SlideFooter\n *\n * Optional footer component for slides that provides contextual metadata\n * and navigation affordances without affecting slide layout.\n *\n * Responsibilities:\n * - Display slide progress (current / total)\n * - Show navigation hints appropriate to device (keyboard vs swipe)\n * - Optionally render lightweight branding attribution\n *\n * Interaction model:\n * - Purely informational (no navigation control)\n * - Adapts copy and hints for mobile vs desktop\n *\n * Usage:\n * ```tsx\n * <Slide footer={<SlideFooter />} />\n *\n * <Slide\n *   footer={<SlideFooter showAdd showHint={false} />}\n * />\n * ```\n *\n * Notes:\n * - Footer is part of content flow (non-sticky)\n * - Does not control slide navigation or state\n * - Intended to remain visually subtle and non-distracting\n */\n\ntype SlideFooterProps = {\n\tclassName?: string;\n\tshowProgress?: boolean;\n\tshowHint?: boolean;\n\tshowAdd?: boolean;\n};\n\nexport function SlideFooter({\n\tclassName,\n\tshowProgress = true,\n\tshowHint = true,\n\tshowAdd = false,\n}: SlideFooterProps) {\n\tconst deck = useDeck();\n\n\t// Using grid layout for precise alignment: Left (Progress), Center (Branding), Right (Hint)\n\treturn (\n\t\t<footer\n\t\t\tclassName={cn(\n\t\t\t\t\"grid grid-cols-3 items-center gap-4 px-6 py-4 w-full\",\n\t\t\t\t\"bg-background/20 backdrop-blur-lg\",\n\t\t\t\t\"text-sm font-medium text-muted-foreground transition-colors\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{/* Left: Progress */}\n\t\t\t<div className=\"flex justify-start\">\n\t\t\t\t{showProgress && (\n\t\t\t\t\t<span className=\"tabular-nums opacity-75 hover:opacity-100 transition-opacity\">\n\t\t\t\t\t\tSlide {deck.index + 1} <span className=\"text-muted-foreground/40 mx-1\">/</span> {deck.total}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Center: Branding (Optional) */}\n\t\t\t<div className=\"flex justify-center\">\n\t\t\t\t{showAdd && (\n\t\t\t\t\t<span className=\"opacity-50 hover:opacity-100 transition-opacity flex items-center gap-1.5 text-xs\">\n\t\t\t\t\t\tBuilt with <a href={\"https://slide-cn.com\"} target=\"_blank\" className=\"font-semibold hover:underline\">Slide-CN</a>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Right: Hint */}\n\t\t\t<div className=\"flex justify-end\">\n\t\t\t\t{showHint && (\n\t\t\t\t\t<span className=\"hidden sm:flex items-center gap-2 opacity-70 hover:opacity-100 transition-opacity\">\n\t\t\t\t\t\t<FooterKeyCap>&#8592;</FooterKeyCap>\n\t\t\t\t\t\t<FooterKeyCap>&#8594;</FooterKeyCap>\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t{/* Mobile simplified hint */}\n\t\t\t\t{showHint && (\n\t\t\t\t\t<span className=\"sm:hidden flex items-center gap-1.5 opacity-70 hover:opacity-100 transition-opacity text-xs\">\n\t\t\t\t\t\t<span>Swipe</span>\n\t\t\t\t\t\t<ChevronLeft className=\"w-3 h-3\" />\n\t\t\t\t\t\t<ChevronRight className=\"w-3 h-3\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</footer>\n\t);\n}\n",
      "type": "registry:component",
      "target": "components/ui/slide-cn/slide-footer.tsx"
    }
  ],
  "type": "registry:component"
}