57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import { ModeToggle } from "@/components/docs/theme-toggle";
|
|
import docuConfig from "@/docu.json";
|
|
import * as LucideIcons from "lucide-react"; // Import all icons
|
|
|
|
export function Footer() {
|
|
const { footer } = docuConfig;
|
|
const { meta } = docuConfig;
|
|
return (
|
|
<footer className="w-full py-4 px-2 border-t lg:py-8 bg-background">
|
|
<div className="container flex flex-wrap items-center justify-between text-sm">
|
|
<div className="items-start justify-center hidden gap-4 lg:flex-col lg:flex lg:w-3/5">
|
|
<h3 className="text-lg font-bold font-code">{meta.title}</h3>
|
|
<span className="w-3/4 text-base text-wrap text-muted-foreground">{meta.description}</span>
|
|
<div className="flex items-center gap-6 mt-2">
|
|
<FooterButtons />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-start justify-center w-full gap-4 mt-4 xl:items-end lg:w-2/5">
|
|
<p className="text-center text-muted-foreground">
|
|
Copyright © {new Date().getFullYear()} {footer.copyright} - Made with{" "}
|
|
<Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
|
|
DocuBook
|
|
</Link>
|
|
</p>
|
|
<div className="hidden lg:flex">
|
|
<ModeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export function FooterButtons() {
|
|
const { footer } = docuConfig;
|
|
|
|
return (
|
|
<>
|
|
{footer.social?.map((item) => {
|
|
const IconComponent = (LucideIcons[item.iconName as keyof typeof LucideIcons] ?? LucideIcons["Globe"]) as unknown as React.FC<{ className?: string }>;
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={item.name}
|
|
>
|
|
<IconComponent className="w-4 h-4 text-gray-800 transition-colors dark:text-gray-400 hover:text-primary" />
|
|
</Link>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|