chore: refactor code for type safety

app/(tabs)/home/page.tsx

@@ -1,24 +1,29 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, ReactNode } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-import Link from "next/link";
 import Header from "@/components/Header";
 import SlidingGallery from "@/components/SlidingGallery";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import { ChevronRight } from "lucide-react"; // Using Lucide React for icons
 import styles from "@/css/Home.module.css";
-import facebookStyles from "@/css/SlidingGallery.module.css";
 import { API_URL } from "@/lib/auth";
-import { Avatar, AvatarFallback } from "@radix-ui/react-avatar";
+import { Avatar } from "@/components/ui/avatar";
+import { getLinkedViews } from "@/lib/gallery-views";
+import { getTopThree } from "@/lib/leaderboard";
+
+interface LinkedView {
+  id: string;
+  content: ReactNode;
+}
 
 const page = () => {
-  const profileImg = "/images/static/avatar.jpg";
   const router = useRouter();
   const [boardData, setBoardData] = useState([]);
   const [boardError, setBoardError] = useState(null);
+  const [linkedViews, setLinkedViews] = useState<LinkedView[]>();
 
   const performanceData = [
     { label: "Mock Test", progress: 20 },
@@ -31,38 +36,6 @@ const page = () => {
     { label: "Chemistry", progress: 57 },
   ];
 
-  const facebookViews = [
-    {
-      id: "1",
-      content: (
-        <Link
-          href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
-          className="w-full h-full block text-inherit  box-border"
-        >
-          <div className="w-full h-full p-6 flex   text-black  bg-blue-50 rounded-4xl border-[0.5px] border-[#113768]/30">
-            <div className="">
-              <h3 className="text-2xl text-[#113768] font-black">
-                Meet, Share, and Learn!
-              </h3>
-              <p className="font-bold text-sm text-[#113768] ">
-                Join Facebook Community
-              </p>
-            </div>
-            <div className={facebookStyles.logoView}>
-              <Image
-                src="/images/static/facebook-logo.png"
-                alt="Facebook Logo"
-                width={150}
-                height={150}
-              />
-            </div>
-          </div>
-        </Link>
-      ),
-    },
-  ];
-
-  // Fetch function for leaderboard data
   useEffect(() => {
     let isMounted = true;
     async function fetchBoardData() {
@@ -77,32 +50,21 @@ const page = () => {
         if (isMounted) setBoardError(error.message || "An error occurred");
       }
     }
-    fetchBoardData();
+    const fetchedLinkedViews = getLinkedViews();
+    setLinkedViews(fetchedLinkedViews);
+
     return () => {
       isMounted = false;
     };
   }, []);
 
-  const getTopThree = (boardData) => {
-    if (!boardData || boardData.length === 0) return [];
-    return boardData
-      .slice()
-      .sort((a, b) => b.points - a.points)
-      .slice(0, 3)
-      .map((player, index) => ({
-        ...player,
-        rank: index + 1,
-        height: index === 0 ? 250 : index === 1 ? 200 : 170,
-      }));
-  };
-
   return (
     <BackgroundWrapper>
       <div className={styles.container}>
-        <Header displayTabTitle={null} displayUser image={profileImg} />
+        <Header displayUser />
         <div className={styles.scrollContainer}>
           <div className={styles.contentWrapper}>
-            <SlidingGallery views={facebookViews} height="23vh" />
+            <SlidingGallery views={linkedViews} height="23vh" />
             <div className={styles.mainContent}>
               {/* Categories Section */}
               <div>