Footer

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function Footer({ className, ...props }: React.ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="footer"
9      className={cn("bg-background text-foreground pt-12 pb-4", className)}
10      {...props}
11    />
12  );
13}
14 
15function FooterContent({ className, ...props }: React.ComponentProps<"div">) {
16  return (
17    <div
18      data-slot="footer-content"
19      className={cn(
20        "grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
21        className,
22      )}
23      {...props}
24    />
25  );
26}
27 
28function FooterColumn({ className, ...props }: React.ComponentProps<"div">) {
29  return (
30    <div
31      data-slot="footer-column"
32      className={cn("flex flex-col gap-4", className)}
33      {...props}
34    />
35  );
36}
37 
38function FooterBottom({ className, ...props }: React.ComponentProps<"div">) {
39  return (
40    <div
41      data-slot="footer-bottom"
42      className={cn(
43        "border-border dark:border-border/15 text-muted-foreground mt-8 flex flex-col items-center justify-between gap-4 border-t pt-4 text-xs sm:flex-row",
44        className,
45      )}
46      {...props}
47    />
48  );
49}
50 
51export { Footer, FooterBottom, FooterColumn, FooterContent };