Initial react editor website template

2026-08-29 14:03:50 -04:00
commit 3e072967e6
61 changed files with 7041 additions and 0 deletions
@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import { Logo } from '@/components/logo';
+import { ThemeToggle } from '@/components/theme-toggle';
+
+export type FooterProps = {
+  siteName?: string;
+  logoUrl?: string;
+  description?: string;
+  links?: Array<{ label: string; url: string }>;
+  socialLinks?: Array<{ label: string; url: string }>;
+  copyright?: string;
+  showThemeToggle?: 'yes' | 'no';
+};
+
+export default function Footer({
+  siteName = 'Your Company', logoUrl = '', description = '', links = [], socialLinks = [], copyright, showThemeToggle = 'yes',
+}: FooterProps) {
+  return (
+    <footer className="bg-background">
+      <div className="section-shell grid gap-10 py-14 md:grid-cols-[1.3fr_1fr] md:py-16">
+        <div className="max-w-sm">
+          <Logo name={siteName} logoUrl={logoUrl} />
+          {description && <p className="mt-4 text-sm leading-6 text-muted-foreground">{description}</p>}
+        </div>
+        <div className="grid grid-cols-2 gap-8 sm:grid-cols-[1fr_1fr_auto]">
+          <nav aria-label="Footer navigation" className="flex flex-col gap-3">
+            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Explore</p>
+            {links.map((link) => <Link key={`${link.label}-${link.url}`} href={link.url} className="text-sm hover:text-brand">{link.label}</Link>)}
+          </nav>
+          <nav aria-label="Social links" className="flex flex-col gap-3">
+            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Connect</p>
+            {socialLinks.map((link) => <a key={`${link.label}-${link.url}`} href={link.url} className="text-sm hover:text-brand">{link.label}</a>)}
+          </nav>
+          {showThemeToggle === 'yes' && <div className="col-span-2 sm:col-span-1"><ThemeToggle /></div>}
+        </div>
+      </div>
+      <div className="section-shell py-5 text-xs text-muted-foreground">
+        {copyright || `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`}
+      </div>
+    </footer>
+  );
+}