fix footer and sponshor

components/Sponsor.tsx

@@ -1,16 +1,45 @@
-import docuConfig from "@/docu.json";
+import docuData from "@/docu.json";
 import Image from "next/image";
 import Link from "next/link";
 
-export function Sponsor() {
+// Define types for docu.json
-  const sponsor = docuConfig.sponsor;
+interface SponsorItem {
-  const item = sponsor?.item;
+  url: string;
+  image: string;
+  title: string;
+  description?: string;
+}
 
-  if (!item) return null;
+interface DocuConfig {
+  sponsor?: {
+    title?: string;
+    item?: SponsorItem;
+  };
+  navbar: any; // Anda bisa mendefinisikan tipe yang lebih spesifik jika diperlukan
+  footer: any;
+  meta: any;
+  repository: any;
+  routes: any[];
+}
+
+// Type assertion for docu.json
+const docuConfig = docuData as DocuConfig;
+
+export function Sponsor() {
+  // Safely get sponsor data with optional chaining and default values
+  const sponsor = docuConfig?.sponsor || {};
+  const item = sponsor?.item;
+  
+  // Return null if required fields are missing
+  if (!item?.url || !item?.image || !item?.title) {
+    return null;
+  }
 
   return (
     <div className="mt-4">
-      <h2 className="mb-4 text-sm font-medium">{sponsor.title || "Sponsor"}</h2>
+      {sponsor?.title && (
+        <h2 className="mb-4 text-sm font-medium">{sponsor.title}</h2>
+      )}
       <Link
         href={item.url}
         target="_blank"
@@ -23,11 +52,14 @@ export function Sponsor() {
             alt={item.title}
             fill
             className="object-contain"
+            sizes="32px"
           />
         </div>
         <div className="text-center sm:text-left">
           <h3 className="text-sm font-medium">{item.title}</h3>
-          <p className="text-muted-foreground text-sm">{item.description}</p>
+          {item.description && (
+            <p className="text-muted-foreground text-sm">{item.description}</p>
+          )}
         </div>
       </Link>
     </div>

components/footer.tsx

@@ -1,7 +1,37 @@
 import Link from "next/link";
 import { ModeToggle } from "@/components/theme-toggle";
-import docuConfig from "@/docu.json";
+import docuData from "@/docu.json";
-import * as LucideIcons from "lucide-react"; // Import all icons
+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;
@@ -33,7 +63,7 @@ export function FooterButtons() {
   const footer = docuConfig?.footer;
 
   // Jangan render apapun jika tidak ada data sosial
-  if (!footer?.social || !Array.isArray(footer.social) || footer.social.length === 0) {
+  if (!footer || !Array.isArray(footer.social) || footer.social.length === 0) {
     return null;
   }