{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-pro",
  "type": "registry:ui",
  "title": "Footer Pro",
  "description": "A minimal, typographic footer with brand wordmark, link columns, and quiet social icons.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/footer-pro.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\n/* ── types ─────────────────────────────────────────────────────── */\ninterface FooterLink {\n  label: string;\n  href: string;\n}\n\ninterface FooterColumn {\n  title: string;\n  links: FooterLink[];\n}\n\ninterface FooterSocial {\n  icon: React.ComponentType<{ className?: string }>;\n  href: string;\n  label?: string;\n}\n\ninterface FooterProProps {\n  /** Custom brand mark — any ReactNode (SVG, icon, emoji). Falls back to a default geometric mark. */\n  brandMark?: React.ReactNode;\n  brandName?: string;\n  description?: string;\n  columns?: FooterColumn[];\n  socials?: FooterSocial[];\n  bottomLinks?: FooterLink[];\n  /** Status text shown with a breathing indicator dot. Pass `undefined` to hide. */\n  statusText?: string;\n  copyright?: string;\n}\n\n/* ── default brand mark ────────────────────────────────────────── */\nfunction DefaultMark() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 18 18\"\n      fill=\"none\"\n      className=\"size-[18px]\"\n      aria-hidden=\"true\"\n    >\n      <rect width=\"18\" height=\"18\" rx=\"5\" className=\"fill-foreground\" />\n    </svg>\n  );\n}\n\n/* ── defaults ──────────────────────────────────────────────────── */\nconst defaults = {\n  brandName: \"ruixen ui\",\n  description:\n    \"Modern, fast, and customizable React components — built with Tailwind CSS, TypeScript, and accessibility in mind.\",\n  columns: [\n    {\n      title: \"Product\",\n      links: [\n        { label: \"Components\", href: \"#\" },\n        { label: \"Templates\", href: \"#\" },\n        { label: \"Pro\", href: \"#\" },\n        { label: \"Changelog\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Resources\",\n      links: [\n        { label: \"Documentation\", href: \"#\" },\n        { label: \"API Reference\", href: \"#\" },\n        { label: \"Guides\", href: \"#\" },\n        { label: \"Examples\", href: \"#\" },\n      ],\n    },\n    {\n      title: \"Company\",\n      links: [\n        { label: \"About\", href: \"#\" },\n        { label: \"Blog\", href: \"#\" },\n        { label: \"Careers\", href: \"#\" },\n        { label: \"Contact\", href: \"#\" },\n      ],\n    },\n  ] as FooterColumn[],\n  socials: [] as FooterSocial[],\n  bottomLinks: [\n    { label: \"Privacy\", href: \"#\" },\n    { label: \"Terms\", href: \"#\" },\n  ] as FooterLink[],\n  statusText: \"All systems operational\",\n  copyright: `\\u00A9 ${new Date().getFullYear()} ruixen ui`,\n};\n\n/* ── component ─────────────────────────────────────────────────── */\nexport default function FooterPro(props?: FooterProProps) {\n  const brandMark = props?.brandMark;\n  const brandName = props?.brandName ?? defaults.brandName;\n  const description = props?.description ?? defaults.description;\n  const columns = props?.columns ?? defaults.columns;\n  const socials = props?.socials ?? defaults.socials;\n  const bottomLinks = props?.bottomLinks ?? defaults.bottomLinks;\n  const statusText = props?.statusText ?? defaults.statusText;\n  const copyright = props?.copyright ?? defaults.copyright;\n\n  return (\n    <footer className=\"border-t border-foreground/[0.06] bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-12 lg:py-16\">\n        {/* ── content: brand + columns ──────────────────────────── */}\n        <div className=\"flex flex-col gap-10 lg:flex-row lg:gap-16\">\n          {/* brand */}\n          <div className=\"shrink-0 lg:max-w-[280px]\">\n            <div className=\"flex items-center gap-2.5\">\n              {brandMark ?? <DefaultMark />}\n              <span className=\"text-[15px] font-[590] tracking-[-0.015em] text-foreground\">\n                {brandName}\n              </span>\n            </div>\n            <p className=\"mt-4 text-[13px] leading-[1.6] text-foreground/45\">\n              {description}\n            </p>\n          </div>\n\n          {/* columns */}\n          <div className=\"grid flex-1 grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-4\">\n            {columns.map((col) => (\n              <div key={col.title}>\n                <p className=\"text-[11px] font-medium uppercase tracking-[0.1em] text-foreground/30\">\n                  {col.title}\n                </p>\n                <ul className=\"mt-4 space-y-2.5\">\n                  {col.links.map((link) => (\n                    <li key={link.label}>\n                      <Link\n                        href={link.href}\n                        className=\"group/link inline-flex items-center text-[13px] text-foreground/50 transition-colors duration-150 hover:text-foreground\"\n                      >\n                        <span className=\"transition-transform duration-150 group-hover/link:translate-x-0.5\">\n                          {link.label}\n                        </span>\n                      </Link>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* ── bottom ───────────────────────────────────────────── */}\n        <div className=\"mt-14 border-t border-foreground/[0.06] pt-6\">\n          {/* status indicator */}\n          {statusText && (\n            <div className=\"mb-4 flex items-center gap-2\">\n              <span className=\"relative flex size-1.5\">\n                <span className=\"absolute inline-flex size-full animate-ping rounded-full bg-emerald-400/60\" />\n                <span className=\"relative inline-flex size-1.5 rounded-full bg-emerald-500\" />\n              </span>\n              <span className=\"text-[11px] text-foreground/30\">\n                {statusText}\n              </span>\n            </div>\n          )}\n\n          <div className=\"flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center\">\n            <p className=\"text-[12px] text-foreground/25\">{copyright}</p>\n\n            <div className=\"flex items-center gap-5\">\n              {bottomLinks.map((link) => (\n                <Link\n                  key={link.label}\n                  href={link.href}\n                  className=\"text-[12px] text-foreground/30 transition-colors duration-150 hover:text-foreground/60\"\n                >\n                  {link.label}\n                </Link>\n              ))}\n\n              {socials.length > 0 && bottomLinks.length > 0 && (\n                <div className=\"h-3 w-px bg-foreground/[0.08]\" />\n              )}\n\n              {socials.map(({ icon: Icon, href, label }, idx) => (\n                <Link\n                  key={idx}\n                  href={href}\n                  aria-label={label}\n                  className=\"text-foreground/30 transition-colors duration-150 hover:text-foreground/60\"\n                >\n                  <Icon className=\"size-3.5\" />\n                </Link>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/footer-pro.tsx"
    }
  ]
}