"use client"; import Link from "next/link"; import { useRef } from "react"; import { ArrowUpRightIcon, MonitorIcon, MoonIcon, SunIcon, } from "lucide-react"; import { motion, useInView, useReducedMotion } from "motion/react"; import { motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import type { FooterColumn, FooterLinkItem } from "./footer-data"; import { footerBrand, footerLegalLinks, footerSocials } from "./footer-data"; const linkClass = cn( "relative inline-flex min-h-10 items-center text-muted-foreground text-sm transition-[color,transform] hover:text-foreground", "after:absolute after:top-1/2 after:left-1/2 after:size-10 after:-translate-x-1/2 after:-translate-y-1/2", "active:scale-[0.96]", ); function SocialIcon({ icon }: { icon: (typeof footerSocials)[number]["icon"] }) { const className = "size-4 shrink-0"; switch (icon) { case "github": return ( ); case "linkedin": return ( ); case "youtube": return ( ); default: return ( ); } } export function FooterLink({ href, children, inverse, className, external, }: { href: string; children: React.ReactNode; inverse?: boolean; className?: string; external?: boolean; }) { const isExternal = external ?? href.startsWith("http"); return ( {children} ); } export function FooterBrand({ inverse, size = "default", showTagline = true, className, }: { inverse?: boolean; size?: "default" | "large" | "display"; showTagline?: boolean; className?: string; }) { const titleClass = cn( "font-semibold tracking-[-0.04em] text-balance", size === "display" && "text-4xl md:text-6xl", size === "large" && "text-2xl md:text-3xl", size === "default" && "text-lg md:text-xl", inverse ? "text-background" : "text-foreground", ); return (

{footerBrand.name} {showTagline ? (

{footerBrand.tagline}

) : null}

); } export function FooterOutlineWordmark({ className }: { className?: string }) { return (

{footerBrand.name}

); } export function FooterColumnHeading({ children, variant = "default", inverse, }: { children: React.ReactNode; variant?: "default" | "caps"; inverse?: boolean; }) { return (

{children}

); } export function FooterLinkColumn({ column, inverse, headingVariant = "default", showBadges = false, compact = false, }: { column: FooterColumn; inverse?: boolean; headingVariant?: "default" | "caps"; showBadges?: boolean; compact?: boolean; }) { return (

{column.title}

{link.label} {showBadges && link.badge ? ( {link.badge} ) : null}

); } export function FooterSocialIcons({ className, inverse, variant = "icon", }: { className?: string; inverse?: boolean; variant?: "icon" | "boxed"; }) { return ( ); } export function FooterSocialRow({ className, inverse, }: { className?: string; inverse?: boolean; }) { return ( ); } export function FooterStatusPill({ inverse, className, }: { inverse?: boolean; className?: string; }) { return (

All systems normal

); } export function FooterLegalBar({ inverse, extraLinks, centered, }: { inverse?: boolean; extraLinks?: FooterLinkItem[]; centered?: boolean; }) { const year = new Date().getFullYear(); const links = extraLinks ?? footerLegalLinks; return (

{centered ? null : ( )}

); } export function FooterContentShell({ children, className, }: { children: React.ReactNode; className?: string; }) { const ref = useRef(null); const inView = useInView(ref, motionViewport); return (

{children}

); } export function FooterMotionShell({ children, className, inverse, wide, }: { children: React.ReactNode; className?: string; inverse?: boolean; wide?: boolean; }) { const ref = useRef(null); const inView = useInView(ref, motionViewport); return ( ); } export function FooterMotionSection({ children, className, }: { children: React.ReactNode; className?: string; }) { const reduceMotion = useReducedMotion(); const itemVariants = reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 6 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: { type: "spring" as const, duration: 0.3, bounce: 0 }, }, }; return ( {children} ); } export function FooterGridCell({ children, className, }: { children: React.ReactNode; className?: string; }) { return (

{children}

); } export function FooterThemePill({ inverse }: { inverse?: boolean }) { const modes = [ { id: "system", icon: MonitorIcon, label: "System" }, { id: "light", icon: SunIcon, label: "Light" }, { id: "dark", icon: MoonIcon, label: "Dark" }, ] as const; return (

{modes.map((mode, index) => ( ))}

); }