{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-01",
  "description": "A footer.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/blocks/footer-01/page.tsx",
      "content": "import { Footer } from \"@/registry/blocks/footer-01/components/footer\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <Footer />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/footer/page.tsx"
    },
    {
      "path": "registry/blocks/footer-01/components/footer.tsx",
      "content": "import Link from \"next/link\"\nimport { ChevronDownIcon, SquareArrowOutUpRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Icons } from \"@/components/icons\"\nimport { PingDot } from \"@/components/ping-dot\"\n\nimport { ThemeSwitcher } from \"./theme-toggler\"\n\nconst linksPro = [\n  {\n    group: \"Product\",\n    items: [\n      {\n        title: \"AI\",\n        href: \"#\",\n      },\n      {\n        title: \"Enterprise\",\n        href: \"#\",\n      },\n      {\n        title: \"Fluid Compute\",\n        href: \"#\",\n      },\n      {\n        title: \"Next.js\",\n        href: \"#\",\n      },\n      {\n        title: \"Observability\",\n        href: \"#\",\n      },\n      {\n        title: \"Previews\",\n        href: \"#\",\n      },\n      {\n        title: \"Rendering\",\n        href: \"#\",\n      },\n      {\n        title: \"Security\",\n        href: \"#\",\n      },\n      {\n        title: \"Turbo\",\n        href: \"#\",\n      },\n      {\n        title: \"Domains\",\n        href: \"#\",\n      },\n    ],\n  },\n]\n\nconst linksRes = [\n  {\n    group: \"Resources\",\n    items: [\n      {\n        title: \"Docs\",\n        href: \"#\",\n      },\n      {\n        title: \"Guides\",\n        href: \"#\",\n      },\n      {\n        title: \"Academy\",\n        href: \"#\",\n      },\n      {\n        title: \"Help\",\n        href: \"#\",\n      },\n      {\n        title: \"Integrations\",\n        href: \"#\",\n      },\n      {\n        title: \"Pricing\",\n        href: \"#\",\n      },\n      {\n        title: \"Resources\",\n        href: \"#\",\n      },\n      {\n        title: \"Solution Partners\",\n        href: \"#\",\n      },\n      {\n        title: \"Startups\",\n        href: \"#\",\n      },\n      {\n        title: \"Templates\",\n        href: \"#\",\n      },\n    ],\n  },\n]\n\nconst linksCom = [\n  {\n    group: \"Company\",\n    items: [\n      {\n        title: \"About\",\n        href: \"#\",\n      },\n      {\n        title: \"Blog\",\n        href: \"#\",\n      },\n      {\n        title: \"Careers\",\n        href: \"#\",\n      },\n      {\n        title: \"Changelog\",\n        href: \"#\",\n      },\n      {\n        title: \"Contact Us\",\n        href: \"#\",\n      },\n      {\n        title: \"Customers\",\n        href: \"#\",\n      },\n      {\n        title: \"Events\",\n        href: \"#\",\n      },\n      {\n        title: \"Partners\",\n        href: \"#\",\n      },\n      {\n        title: \"Shipped\",\n        href: \"#\",\n      },\n      {\n        title: \"Privacy Policy\",\n        href: \"#\",\n      },\n    ],\n  },\n]\n\nexport function Footer() {\n  return (\n    <footer className=\"py-16\">\n      <div className=\"mx-auto max-w-6xl px-6\">\n        <div className=\"\">\n          <div className=\"grid grid-cols-2 gap-14 md:grid-cols-3 lg:grid-cols-5\">\n            <div className=\"grid gap-3\">\n              {linksPro.map((link, index) => (\n                <div key={index} className=\"space-y-3 text-sm\">\n                  <span className=\"block font-medium\">{link.group}</span>\n                  {link.items.map((item, index) => (\n                    <Link\n                      key={index}\n                      href={item.href}\n                      className=\"text-muted-foreground block duration-150 hover:text-cyan-500\"\n                    >\n                      <span>{item.title}</span>\n                    </Link>\n                  ))}\n                  <Link\n                    href={\"#\"}\n                    className=\"text-muted-foreground flex items-center gap-1 text-sm duration-150 hover:text-cyan-500\"\n                  >\n                    v0\n                    <SquareArrowOutUpRightIcon strokeWidth={2} size={16} />\n                  </Link>\n                </div>\n              ))}\n            </div>\n            <div className=\"grid gap-3\">\n              {linksRes.map((link, index) => (\n                <div key={index} className=\"space-y-3 text-sm\">\n                  <span className=\"block font-medium\">{link.group}</span>\n                  <Link\n                    href={\"#\"}\n                    className=\"text-muted-foreground flex items-center gap-1 text-sm duration-150 hover:text-cyan-500\"\n                  >\n                    Community\n                    <SquareArrowOutUpRightIcon strokeWidth={2} size={16} />\n                  </Link>\n                  {link.items.map((item, index) => (\n                    <Link\n                      key={index}\n                      href={item.href}\n                      className=\"text-muted-foreground block duration-150 hover:text-cyan-500\"\n                    >\n                      <span>{item.title}</span>\n                    </Link>\n                  ))}\n                  <DropdownMenu>\n                    <DropdownMenuTrigger className=\"text-muted-foreground flex items-center gap-1 text-sm hover:text-cyan-500\">\n                      SDKs by Vercel{\" \"}\n                      <ChevronDownIcon strokeWidth={2} size={16} />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      side=\"top\"\n                      align=\"end\"\n                      className=\"w-60 p-1\"\n                    >\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        AI SDK{\" \"}\n                        <SquareArrowOutUpRightIcon strokeWidth={2} size={16} />\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Flags SDK{\" \"}\n                        <SquareArrowOutUpRightIcon strokeWidth={2} size={16} />\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Chat SDK{\" \"}\n                        <SquareArrowOutUpRightIcon strokeWidth={2} size={16} />\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Streamdown AI{\" \"}\n                        <SquareArrowOutUpRightIcon strokeWidth={2} size={16} />\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              ))}\n            </div>\n            <div className=\"grid gap-3\">\n              {linksCom.map((link, index) => (\n                <div key={index} className=\"space-y-3 text-sm\">\n                  <span className=\"block font-medium\">{link.group}</span>\n\n                  {link.items.map((item, index) => (\n                    <Link\n                      key={index}\n                      href={item.href}\n                      className=\"text-muted-foreground block duration-150 hover:text-cyan-500\"\n                    >\n                      <span>{item.title}</span>\n                    </Link>\n                  ))}\n                  <DropdownMenu>\n                    <DropdownMenuTrigger className=\"text-muted-foreground flex items-center gap-1 text-sm hover:text-cyan-500\">\n                      Legal <ChevronDownIcon strokeWidth={2} size={16} />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      side=\"top\"\n                      align=\"end\"\n                      className=\"w-60 p-1\"\n                    >\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Cookie Policy\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Cookie Preferences\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        DMCA Policy\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        DORA Addendum\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        DPA\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-16 px-4\">\n                        Domain Name Registration and Services Terms\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Event Code of Conduct\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Event Terms and Conditions\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Inactivity Policy\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Job Applicant Privacy Notice\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Privacy Policy\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        SLA\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Sub-processors\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Support Terms\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Terms of Service\n                      </DropdownMenuItem>\n                      <DropdownMenuItem className=\"h-10 px-4\">\n                        Trademark Policy\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              ))}\n            </div>\n            <div className=\"grid gap-3\">\n              <div className=\"space-y-3 text-sm\">\n                <span className=\"block font-medium\">Social</span>\n                <Link\n                  href=\"#\"\n                  className=\"text-muted-foreground block duration-150 hover:text-cyan-500\"\n                >\n                  <span className=\"flex items-center gap-2\">Github</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"text-muted-foreground block duration-150 hover:text-cyan-500\"\n                >\n                  <span className=\"flex items-center gap-2\">LinkedIn</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"text-muted-foreground block duration-150 hover:text-cyan-500\"\n                >\n                  <span className=\"flex items-center gap-2\">Twitter</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"text-muted-foreground block duration-150 hover:text-cyan-500\"\n                >\n                  <span className=\"flex items-center gap-2\">YouTube</span>\n                </Link>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"mt-10 flex flex-wrap items-end justify-between gap-6 py-6\">\n          <Button\n            className=\"cursor-pointer text-cyan-500 hover:text-cyan-500\"\n            variant={\"ghost\"}\n          >\n            <PingDot />\n            All systems normal.\n          </Button>\n          <ThemeSwitcher />\n        </div>\n      </div>\n    </footer>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/footer-01/components/theme-toggler.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useEffect, useState } from \"react\"\nimport { MonitorIcon, MoonIcon, SunIcon } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst themes = [\n  {\n    key: \"system\",\n    icon: MonitorIcon,\n    label: \"System theme\",\n  },\n  {\n    key: \"light\",\n    icon: SunIcon,\n    label: \"Light theme\",\n  },\n  {\n    key: \"dark\",\n    icon: MoonIcon,\n    label: \"Dark theme\",\n  },\n]\n\nexport type ThemeSwitcherProps = {\n  value?: \"light\" | \"dark\" | \"system\"\n  onChange?: (theme: \"light\" | \"dark\" | \"system\") => void\n  defaultValue?: \"light\" | \"dark\" | \"system\"\n  className?: string\n}\n\nexport const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => {\n  const { theme, setTheme } = useTheme()\n  const [mounted, setMounted] = useState(false)\n\n  const handleThemeClick = useCallback(\n    (themeKey: \"light\" | \"dark\" | \"system\") => {\n      setTheme(themeKey)\n    },\n    [setTheme]\n  )\n\n  // Prevent hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  if (!mounted) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"bg-background ring-border relative isolate flex h-7 rounded-full p-1 ring-1\",\n        className\n      )}\n    >\n      {themes.map(({ key, icon: Icon, label }) => {\n        const isActive = theme === key\n\n        return (\n          <button\n            aria-label={label}\n            className=\"relative h-5 w-6 rounded-full\"\n            key={key}\n            onClick={() => handleThemeClick(key as \"light\" | \"dark\" | \"system\")}\n            type=\"button\"\n          >\n            {isActive && (\n              <div className=\"bg-secondary absolute inset-0 rounded-full\" />\n            )}\n            <Icon\n              className={cn(\n                \"relative z-10 m-auto h-3.5 w-3.5\",\n                isActive ? \"text-foreground\" : \"text-muted-foreground\"\n              )}\n            />\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "footer"
  ],
  "type": "registry:block"
}