242 style satellite selector (#243)

* style(frontend): 🔥 remove unused files, restructure folders, style satellite selector

* small fix

* prettier

* eslint and prettier

frontend/src/app/page.tsx

@@ -7,28 +7,28 @@ import Link from "next/link";
 import fetchMostRecentImage from "@/lib/data/fetchMostRecentImage";
 
 import SatelliteDataHome from "@/components/satelliteData/SatelliteDataHome";
-import SatelliteSelector from "@/components/SatelliteSelector";
-import SatelliteGlobe from "@/components/map/newGlobe";
+import SatelliteSelector from "@/components/homeComponents/SatelliteSelector";
+import SatelliteGlobe from "@/components/homeComponents/homeGlobe";
 
 export default async function Home() {
     const mostRecentImageURL = await fetchMostRecentImage();
 
     return (
         <>
-            <div className="flex flex-col bg-gray-600 p-0.5 md:flex-row">
+            <div className="flex flex-col bg-gray-600 p-0.5 xl:flex-row">
                 {/* Stats Container */}
-                <div className="flex w-full min-w-[320px] flex-col md:w-1/3">
-                    <div className="bg-black p-5">
+                <div className="z-10 flex w-full min-w-[500px] flex-col xl:w-1/3">
+                    <div className="bg-black p-1">
                         <SatelliteSelector />
                     </div>
                     <div className="mt-0.5">
                         <SatelliteDataHome />
                     </div>
-                    <div className="mt-0.5 w-full bg-black md:flex-grow"></div>
+                    <div className="mt-0.5 w-full bg-black xl:flex-grow"></div>
                 </div>
 
                 {/* Globe Container */}
-                <div className="ml-0.5 w-full md:w-2/3">
+                <div className="z-0 ml-0.5 w-full xl:w-2/3">
                     <div className="flex h-full items-center justify-center bg-black">
                         <SatelliteGlobe />
                     </div>

frontend/src/components/homeComponents/SatDropdown.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+type DropdownProps = {
+    satelliteNames: string[];
+    selectedSatellite: string;
+    // eslint-disable-next-line no-unused-vars
+    setSelectedSatellite: (satellite: string) => void;
+};
+
+export default function SatDropdown({
+    satelliteNames,
+    selectedSatellite,
+    setSelectedSatellite,
+}: DropdownProps) {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const toggleDropdown = () => setIsOpen(!isOpen);
+
+    const handleSelect = (satellite: string) => {
+        setSelectedSatellite(satellite);
+        setIsOpen(false);
+    };
+
+    // Animation variants for the dropdown content
+    const variants = {
+        open: { opacity: 1, height: "auto", maxHeight: "300px" },
+        collapsed: { opacity: 0, height: 0 },
+    };
+
+    return (
+        <div className="w-full">
+            <button
+                className="block w-full cursor-pointer bg-black p-4 text-left text-xl font-bold tracking-wide"
+                onClick={toggleDropdown}
+            >
+                {selectedSatellite || "Select a Satellite"}
+            </button>
+            {isOpen && <hr />}
+            <motion.div
+                className={cn("overflow-hidden", isOpen && "overflow-y-scroll")}
+                initial="collapsed"
+                animate={isOpen ? "open" : "collapsed"}
+                variants={variants}
+                transition={{ duration: 0.5 }}
+            >
+                {satelliteNames.map((satellite) => (
+                    <div
+                        key={satellite}
+                        className="cursor-pointer p-2 text-white hover:bg-gray-700"
+                        onClick={() => handleSelect(satellite)}
+                    >
+                        {satellite !== selectedSatellite
+                            ? satellite
+                            : `${satellite} (Selected)`}
+                    </div>
+                ))}
+            </motion.div>
+        </div>
+    );
+}

frontend/src/components/homeComponents/SatelliteSelector.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import { useSatelliteStore } from "@/lib/store";
+import SatDropdown from "@/components/homeComponents/SatDropdown";
+
+export default function SatelliteSelector() {
+    const satelliteNames = useSatelliteStore((state) => state.satelliteNames);
+    const selectedSatellite = useSatelliteStore(
+        (state) => state.selectedSatellite,
+    );
+    const setSelectedSatellite = useSatelliteStore(
+        (state) => state.setSelectedSatellite,
+    );
+    const fetchAndSetSatelliteData = useSatelliteStore(
+        (state) => state.fetchAndSetSatelliteData,
+    );
+
+    // Fetch data for each satellite and set it in the store
+    for (const satellite of satelliteNames) {
+        fetchAndSetSatelliteData(satellite);
+    }
+
+    return (
+        <div className="m-0 w-full p-0">
+            <SatDropdown
+                satelliteNames={satelliteNames}
+                selectedSatellite={selectedSatellite}
+                setSelectedSatellite={setSelectedSatellite}
+            />
+        </div>
+    );
+}