Footer Pro

1"use client";
2 
3import * as React from "react";
4import Link from "next/link";
5 
6/* ── types ─────────────────────────────────────────────────────── */
7interface FooterLink {
8  label: string;
9  href: string;
10}
11 
12interface FooterColumn {
13  title: string;
14  links: FooterLink[];
15}
16 
17interface FooterSocial {
18  icon: React.ComponentType<{ className?: string }>;
19  href: string;
20  label?: string;
21}
22 
23interface FooterProProps {
24  /** Custom brand mark — any ReactNode (SVG, icon, emoji). Falls back to a default geometric mark. */
25  brandMark?: React.ReactNode;
26  brandName?: string;
27  description?: string;
28  columns?: FooterColumn[];
29  socials?: FooterSocial[];
30  bottomLinks?: FooterLink[];
31  /** Status text shown with a breathing indicator dot. Pass `undefined` to hide. */
32  statusText?: string;
33  copyright?: string;
34}
35 
36/* ── default brand mark ────────────────────────────────────────── */
37function DefaultMark() {
38  return (
39    <svg
40      width="18"
41      height="18"
42      viewBox="0 0 18 18"
43      fill="none"
44      className="size-[18px]"
45      aria-hidden="true"
46    >
47      <rect width="18" height="18" rx="5" className="fill-foreground" />
48    </svg>
49  );
50}
51 
52/* ── defaults ──────────────────────────────────────────────────── */
53const defaults = {
54  brandName: "ruixen ui",
55  description:
56    "Modern, fast, and customizable React components — built with Tailwind CSS, TypeScript, and accessibility in mind.",
57  columns: [
58    {
59      title: "Product",
60      links: [
61        { label: "Components", href: "#" },
62        { label: "Templates", href: "#" },
63        { label: "Pro", href: "#" },
64        { label: "Changelog", href: "#" },
65      ],
66    },
67    {
68      title: "Resources",
69      links: [
70        { label: "Documentation", href: "#" },
71        { label: "API Reference", href: "#" },
72        { label: "Guides", href: "#" },
73        { label: "Examples", href: "#" },
74      ],
75    },
76    {
77      title: "Company",
78      links: [
79        { label: "About", href: "#" },
80        { label: "Blog", href: "#" },
81        { label: "Careers", href: "#" },
82        { label: "Contact", href: "#" },
83      ],
84    },
85  ] as FooterColumn[],
86  socials: [] as FooterSocial[],
87// … truncated