Site Footer

1import * as React from "react";
2import { ArrowUpRight, Github, Linkedin, Sparkles } from "lucide-react";
3 
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import { cn } from "@/lib/utils";
7 
8type Footer01Props = React.ComponentProps<"footer"> & {
9  brand?: string;
10  description?: string;
11  groups?: FooterLinkGroup[];
12  newsletterPlaceholder?: string;
13};
14 
15type FooterLinkGroup = {
16  title: string;
17  links: Array<{ label: string; href?: string } | string>;
18};
19 
20const defaultGroups: FooterLinkGroup[] = [
21  {
22    title: "Product",
23    links: ["Overview", "Integrations", "Pricing", "Changelog"],
24  },
25  { title: "Company", links: ["About", "Customers", "Careers", "Contact"] },
26  { title: "Resources", links: ["Guides", "Help center", "API", "Status"] },
27];
28 
29function Footer01({
30  brand = "Northstar",
31  description = "A calmer operating system for ambitious teams.",
32  groups = defaultGroups,
33  newsletterPlaceholder = "Email for product notes",
34  className,
35  ...props
36}: Footer01Props) {
37  return (
38    <footer
39      className={cn(
40        "border-t border-foreground/10 bg-background px-5 py-12 sm:px-8 sm:py-16",
41        className,
42      )}
43      data-slot="site-footer"
44      {...props}
45    >
46      <div className="mx-auto max-w-7xl">
47        <div className="grid gap-12 lg:grid-cols-[1.1fr_1.4fr]">
48          <div>
49            <a
50              className="inline-flex items-center gap-2.5 font-semibold"
51              href="#top"
52            >
53              <span className="grid size-9 place-items-center rounded-xl bg-primary text-primary-foreground">
54                <Sparkles className="size-4" />
55              </span>
56              {brand}
57            </a>
58            <p className="mt-5 max-w-sm text-sm leading-relaxed text-muted-foreground">
59              {description}
60            </p>
61            <form className="mt-7 flex max-w-sm gap-2">
62              <Input
63                aria-label="Email address"
64                placeholder={newsletterPlaceholder}
65                type="email"
66              />
67              <Button aria-label="Subscribe" size="icon">
68                <ArrowUpRight />
69              </Button>
70            </form>
71          </div>
72          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
73            {groups.map((group) => (
74              <div key={group.title}>
75                <h3 className="text-xs font-semibold uppercase tracking-[.1em] text-muted-foreground">
76                  {group.title}
77// … truncated