fix sponsor and footer social

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() {
-  const sponsor = docuConfig.sponsor;
-  const item = sponsor?.item;
+// Define types for docu.json
+interface SponsorItem {
+  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>