Footer

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6/* ================================================================== */
7/*  FOOTER ROOT                                                        */
8/* ================================================================== */
9 
10const DEFAULT_CONTAINER = "max-w-5xl mx-auto px-6";
11 
12const footerVariants = cva(["w-full", "border-t"].join(" "), {
13  variants: {
14    variant: {
15      full: "py-10 bg-background text-foreground border-border",
16      compact: "py-3 bg-background text-foreground border-border",
17      branded: "py-8 bg-background text-foreground border-border",
18      centered: "py-10 text-center bg-background text-foreground border-border",
19      dark: "py-10 bg-inverted text-inverted-foreground border-border-strong",
20      minimal: "py-6 bg-background text-foreground border-border",
21    },
22  },
23  defaultVariants: { variant: "full" },
24});
25 
26export interface FooterProps
27  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {
28  /** Class name applied to inner container for width constraint */
29  containerClassName?: string;
30}
31 
32const Footer = React.forwardRef<HTMLElement, FooterProps>(
33  ({ className, variant = "full", containerClassName, children, ...props }, ref) => (
34    <footer
35      ref={ref}
36      data-slot="footer"
37      data-variant={variant ?? "full"}
38      className={cn("@container/footer min-w-0", footerVariants({ variant }), className)}
39      {...props}
40    >
41      <div className={cn("px-6", containerClassName ?? DEFAULT_CONTAINER)}>{children}</div>
42    </footer>
43  ),
44);
45Footer.displayName = "Footer";
46 
47/* ================================================================== */
48/*  FOOTER GRID (multi-column layout for 'full' variant)               */
49/* ================================================================== */
50 
51const FooterGrid = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
52  ({ className, children, ...props }, ref) => (
53    <div
54      ref={ref}
55      data-slot="footer-grid"
56      className={cn(
57        "grid gap-8",
58        "grid-cols-1 @sm/footer:grid-cols-2 @md/footer:grid-cols-3 @lg/footer:grid-cols-4",
59        className,
60      )}
61      {...props}
62    >
63      {children}
64    </div>
65  ),
66);
67FooterGrid.displayName = "FooterGrid";
68 
69/* ================================================================== */
70// … truncated