docu version 1.8.5

components/footer.tsx

@@ -1,7 +1,37 @@
 import Link from "next/link";
 import { ModeToggle } from "@/components/theme-toggle";
-import docuConfig from "@/docu.json";
-import * as LucideIcons from "lucide-react"; // Import all icons
+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;
@@ -13,10 +43,10 @@ export function Footer() {
             <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 /> */}
+                <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">
+        <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>
@@ -30,12 +60,20 @@ export function Footer() {
 }
 
 export function FooterButtons() {
-  const { footer } = docuConfig;
+  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 unknown as React.FC<{ className?: string }>;
+      {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}