104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import { ModeToggle } from "@/components/theme-toggle";
|
|
import docuData from "@/docu.json";
|
|
import * as LucideIcons from "lucide-react";
|
|
|
|
// Define types for docu.json
|
|
interface SocialItem {
|
|
name: string;
|
|
url: string;
|
|
iconName: string;
|
|
}
|
|
|
|
interface FooterConfig {
|
|
copyright: string;
|
|
social?: SocialItem[];
|
|
}
|
|
|
|
interface MetaConfig {
|
|
title: string;
|
|
description: string;
|
|
baseURL: string;
|
|
favicon: string;
|
|
}
|
|
|
|
interface DocuConfig {
|
|
footer: FooterConfig;
|
|
meta: MetaConfig;
|
|
navbar: any;
|
|
repository: any;
|
|
routes: any[];
|
|
}
|
|
|
|
// Type assertion for docu.json
|
|
const docuConfig = docuData as DocuConfig;
|
|
|
|
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-center justify-center w-full gap-4 mt-4 lg:items-end lg:w-2/5">
|
|
<p className="text-center text-muted-foreground">
|
|
Copyright © {new Date().getFullYear()} {footer.copyright} - <MadeWith />
|
|
</p>
|
|
<div className="hidden lg:flex">
|
|
<ModeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|
|
export function FooterButtons() {
|
|
const footer = docuConfig?.footer;
|
|
|
|
// Jangan render apapun jika tidak ada data sosial
|
|
if (!footer || !Array.isArray(footer.social) || footer.social.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{footer.social.map((item) => {
|
|
const IconComponent =
|
|
(LucideIcons[item.iconName as keyof typeof LucideIcons] ??
|
|
LucideIcons["Globe"]) 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>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function MadeWith() {
|
|
return (
|
|
<>
|
|
<span className="text-muted-foreground">Made with </span>
|
|
<span className="text-primary">
|
|
<Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 text-muted-foreground">
|
|
DocuBook
|
|
</Link></span>
|
|
</>
|
|
);
|
|
}
|