design system token v0.1

components/ui/footer.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const footerVariants = cva(
+  'border-t border-border bg-background font-sans',
+  {
+    variants: {
+      variant: {
+        minimal: 'py-8',
+        full: 'py-12',
+      },
+    },
+    defaultVariants: {
+      variant: 'minimal',
+    },
+  },
+)
+
+interface FooterLinkGroup {
+  title: string
+  links: { label: string; href: string }[]
+}
+
+interface FooterProps
+  extends React.ComponentProps<'footer'>,
+    VariantProps<typeof footerVariants> {
+  logo?: React.ReactNode
+  copyright?: React.ReactNode
+  linkGroups?: FooterLinkGroup[]
+  actions?: React.ReactNode
+}
+
+function Footer({
+  className,
+  variant,
+  logo,
+  copyright,
+  linkGroups,
+  actions,
+  children,
+  ...props
+}: FooterProps) {
+  if (variant === 'full' && linkGroups) {
+    return (
+      <footer
+        data-slot="footer"
+        className={cn(footerVariants({ variant, className }))}
+        {...props}
+      >
+        <div className="container mx-auto px-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+            {logo && (
+              <div className="col-span-2 md:col-span-1">
+                {logo}
+              </div>
+            )}
+            {linkGroups.map((group) => (
+              <div key={group.title}>
+                <h4 className="text-sm font-semibold mb-4">{group.title}</h4>
+                <ul className="space-y-2">
+                  {group.links.map((link) => (
+                    <li key={link.href}>
+                      <a
+                        href={link.href}
+                        className="text-sm text-muted-foreground hover:text-primary transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
+            {copyright && (
+              <p className="text-sm text-muted-foreground">{copyright}</p>
+            )}
+            {actions}
+          </div>
+          {children}
+        </div>
+      </footer>
+    )
+  }
+
+  return (
+    <footer
+      data-slot="footer"
+      className={cn(footerVariants({ variant, className }))}
+      {...props}
+    >
+      <div className="container mx-auto px-6">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          {logo && <div>{logo}</div>}
+          {copyright && (
+            <p className="text-sm text-muted-foreground">{copyright}</p>
+          )}
+          {actions}
+          {children}
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export { Footer, footerVariants }