50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1116,'use client'; import { useCallback, useRef, useState } from 'react'; import { cn } from '@/lib/utils'; import { FooterBar, type FooterSocial } from './footer-kit'; export type WordmarkSpotlightFooterVariant = 'Spotlight' | 'Static'; export interface WordmarkSpotlightFooterProps { socials?: FooterSocial[]; wordmark: string; tagline?: string; groups?: { title: string; links: { label: string; href: string }[] }[]; legal?: { label: string; href: string }[]; copyright?: string; radius?: number; variant?: WordmarkSpotlightFooterVariant; className?: string; } export function WordmarkSpotlightFooter({ socials, wordmark, tagline, groups = [], legal, copyright, radius = 260, variant = 'Spotlight', className, }: WordmarkSpotlightFooterProps) { const stage = useRef(null); const [pointer, setPointer] = useState<{ x: number; y: number } | null>(null); const onPointerMove = useCallback((event: React.PointerEvent) => { const box = stage.current?.getBoundingClientRect(); if (!box) return; setPointer({ x: event.clientX - box.left, y: event.clientY - box.top }); }, []); const lit = variant === 'Spotlight' && pointer !== null; const fontSize = `clamp(36px, ${(140 / Math.max(1, wordmark.length)).toFixed(2)}cqi, 240px)`; return ( ); } export default WordmarkSpotlightFooter; 52:T399a,/** * Everything the footer blocks share: the icon set, the brand lockup, the * social row and the bottom bar. * * The earlier blocks inlined their own glyphs so each file copied out whole. * That stopped scaling once every footer needed the same wordmark, the same * three social marks and the same bottom bar — eighteen copies of the same * markup drift within a week. This ships alongside each block instead: the * registry item for `x-footer` lists this file too, so `npx shadcn add` writes * both and the block still installs in one command. * * Two icon styles live here on purpose: * * - Utility icons — arrows, search, check, the rest — are **outline**. A * filled arrow beside 13px text reads as a blob, and a filled chevron in a * select looks like a warning triangle. * - Social and brand marks are **solid**, because a logo drawn in outline is * not that logo. These are the same paths the live site uses. */ import { cn } from '@/lib/utils'; type IconProps = React.SVGProps; /* ── Outline utility icons ────────────────────────────────── One family, one grid, one stroke weight. 1.75 sits between the 1.5 that reads correctly next to regular text and the 2 that a semibold label wants, which is the mix these footers run. */ function Outline({ children, ...props }: IconProps & { children: React.ReactNode }) { return ( ); } export function IconArrowRight(props: IconProps) { return ( ); } export function IconArrowUpRight(props: IconProps) { return ( ); } export function IconArrowUp(props: IconProps) { return ( ); } export function IconChevronDown(props: IconProps) { return ( ); } export function IconChevronRight(props: IconProps) { return ( ); } export function IconSearch(props: IconProps) { return ( ); } export function IconCheck(props: IconProps) { return ( ); } export function IconCopy(props: IconProps) { return ( ); } export function IconLocation(props: IconProps) { return ( ); } export function IconMail(props: IconProps) { return ( ); } export function IconPhone(props: IconProps) { return ( ); } export function IconClock(props: IconProps) { return ( ); } export function IconShield(props: IconProps) { return ( ); } export function IconStar(props: IconProps) { return ( ); } export function IconSparkle(props: IconProps) { return ( ); } export function IconEnter(props: IconProps) { return ( ); } /* ── Brand and social marks ───────────────────────────────── Solid, because a logo drawn in outline is not that logo. */ /** The Spectrum UI flag. Same two paths the site header uses. */ export function SpectrumLogo(props: IconProps) { return ( ); } export function IconGitHub(props: IconProps) { return ( ); } export function IconX(props: IconProps) { return ( ); } export function IconLinkedIn(props: IconProps) { return ( ); } /* ── Brand data ───────────────────────────────────────────── Real routes, so the previews link somewhere rather than to `#`. */ export const SPECTRUM = { name: 'Spectrum UI', tagline: 'Animation-ready React components and blocks, with the source on the page.', url: 'https://ui.spectrumhq.in', copyright: `© ${new Date().getFullYear()} Spectrum UI`, }; export interface FooterSocial { label: string; href: string; icon: React.ComponentType; } export const SPECTRUM_SOCIALS: FooterSocial[] = [ { label: 'GitHub', href: 'https://github.com/arihantcodes/spectrum-ui', icon: IconGitHub }, { label: 'X', href: 'https://x.com/arihantcodes', icon: IconX }, { label: 'LinkedIn', href: 'https://www.linkedin.com/in/arihantcodes', icon: IconLinkedIn }, ]; export interface FooterLinkGroup { title: string; links: { label: string; href: string; badge?: string }[]; } export const SPECTRUM_GROUPS: FooterLinkGroup[] = [ { title: 'Library', links: [ { label: 'Components', href: '/docs/components' }, { label: 'Blocks', href: '/blocks' }, { label: 'Charts', href: '/blocks/charts' }, { label: 'Tables', href: '/blocks/tables' }, { label: 'Footers', href: '/blocks/footers', badge: 'New' }, { label: 'Colors', href: '/colors' }, ], }, { title: 'Docs', links: [ { label: 'Introduction', href: '/docs' }, { label: 'Installation', href: '/docs/installation' }, { label: 'CLI', href: '/docs/cli' }, { label: 'MCP server', href: '/docs/mcp' }, { label: 'Theming', href: '/docs/theming' }, { label: 'Changelog', href: '/changelog' }, ], }, { title: 'Resources', links: [ { label: 'Blog', href: '/blog' }, { label: 'Guides', href: '/docs/guides' }, { label: 'Comparisons', href: '/compare' }, { label: 'Templates', href: '/templates' }, { label: 'Brand kit', href: '/brandkit' }, { label: 'llms.txt', href: '/llm-info' }, ], }, { title: 'Project', links: [ { label: 'GitHub', href: 'https://github.com/arihantcodes/spectrum-ui' }, { label: 'Sponsor', href: '/sponsor' }, { label: 'Pricing', href: '/pricing' }, { label: 'FAQs', href: '/faqs' }, { label: 'Founder story', href: '/founder-story' }, { label: 'Contact', href: 'https://x.com/arihantcodes' }, ], }, ]; export const SPECTRUM_LEGAL = [ { label: 'Privacy', href: '/privacy-policy' }, { label: 'Terms', href: '/tos' }, { label: 'License', href: '/docs/license' }, { label: 'Status', href: '/blocks/footers' }, ]; /* ── Shared pieces ────────────────────────────────────────── `tone="dark"` is for the blocks that are dark in both themes, where `dark:` variants never fire and the light palette would be unreadable. */ export type FooterTone = 'auto' | 'dark'; /** The mark and the wordmark, locked up. */ export function BrandLockup({ brand = SPECTRUM.name, href = '/', tone = 'auto', className, }: { brand?: string; href?: string; tone?: FooterTone; className?: string; }) { return ( {brand} ); } /** The social row. Solid marks, 32px hit area, one hover transition. */ export function FooterSocials({ socials = SPECTRUM_SOCIALS, tone = 'auto', className, }: { socials?: FooterSocial[]; tone?: FooterTone; className?: string; }) { if (socials.length === 0) return null; return (

); } /** * The bottom bar every footer ends on: lockup and copyright left, utility links * and social marks right. One component rather than eighteen hand-rolled * copies, which is the only way they stay identical. */ export function FooterBar({ brand = SPECTRUM.name, copyright, links = SPECTRUM_LEGAL, socials = SPECTRUM_SOCIALS, tone = 'auto', showLockup = true, className, }: { brand?: string; copyright?: string; links?: { label: string; href: string }[]; socials?: FooterSocial[]; tone?: FooterTone; showLockup?: boolean; className?: string; }) { const muted = tone === 'dark' ? 'text-neutral-400' : 'text-neutral-500 dark:text-neutral-400'; const hover = tone === 'dark' ? 'hover:text-neutral-100' : 'hover:text-neutral-900 dark:hover:text-neutral-100'; const rule = tone === 'dark' ? 'border-white/[0.08]' : 'border-black/[0.07] dark:border-white/[0.08]'; return (

{showLockup && }

{copyright ?? SPECTRUM.copyright}

{link.label}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"components/spectrumui/blocks/footers/wordmark-spotlight-footer.tsx","content":"$51","type":"registry:block","target":"components/spectrumui/blocks/footers/wordmark-spotlight-footer.tsx"},{"path":"components/spectrumui/blocks/footers/footer-kit.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/footers/footer-kit.tsx"}],"className":"h-[70svh] min-h-80"}]]}]