Merge pull request #30 from RotaractMora/navbar-fixes

Navbar fixes-#2
RotaractMora · Nov 23, 2024 · 40595c7 · 40595c7
2 parents 17355c9 + 9d5f11a
commit 40595c7
Show file tree

Hide file tree

Showing 11 changed files with 219 additions and 426 deletions.
diff --git a/.env.example b/.env.example
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "clsx": "^2.1.1",
     "cobe": "^0.6.3",
     "firebase": "^11.0.1",
+    "firebase-admin": "^13.0.1",
     "firebase-functions": "^6.1.0",
     "firebase-tools": "^13.24.2",
     "framer-motion": "^11.11.11",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -38,6 +38,8 @@ import { Highlighter } from "@/components/blocks/hilight";
 import {  HomeIcon, ClockIcon , MegaphoneIcon , PhoneArrowUpRightIcon } from "@heroicons/react/24/solid";
 import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
 import Lottie from "react-lottie-player";
+import { IContact } from "@/interfaces/IContacts";
+import { getReachUs } from "@/services/reachus.service";
 
 
 
@@ -160,63 +162,6 @@ const navItms = [
 ];
 
 
-const grid = [
-  {
-    name: "John Doe",
-    email: "john.doe@example.com",
-    phone: "123-456-7890",
-    position: "Software Engineer",
-  },
-  {
-    name: "Jane Smith",
-    email: "jane.smith@example.com",
-    phone: "234-567-8901",
-    position: "Project Manager",
-  },
-  {
-    name: "Alice Johnson",
-    email: "alice.johnson@example.com",
-    phone: "345-678-9012",
-    position: "QA Engineer",
-  },
-  {
-    name: "Bob Brown",
-    email: "bob.brown@example.com",
-    phone: "456-789-0123",
-    position: "Software Engineer",
-  },
-  {
-    name: "Charlie Davis",
-    email: "charlie.davis@example.com",
-    phone: "567-890-1234",
-    position: "Project Manager",
-  },
-  {
-    name: "Diana Evans",
-    email: "diana.evans@example.com",
-    phone: "678-901-2345",
-    position: "QA Engineer",
-  },
-  {
-    name: "Frank Green",
-    email: "frank.green@example.com",
-    phone: "789-012-3456",
-    position: "Software Engineer",
-  },
-  {
-    name: "Grace Harris",
-    email: "grace.harris@example.com",
-    phone: "890-123-4567",
-    position: "Project Manager",
-  },
-  {
-    name: "Henry Lee",
-    email: "henry.lee@example.com",
-    phone: "901-234-5678",
-    position: "QA Engineer",
-  },
-];
-
 const Loading =()=> {
   return (
     <div className="flex items-center justify-center min-h-screen">
@@ -269,26 +214,28 @@ export default function Home() {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isLoadingAnimComplete , setIsLoadingAnimComplete] = useState(false);
-
-  const loadingTimeout = ()=>{setTimeout(() => setIsLoadingAnimComplete(true), 1000);}
-
-    // getTimeLineEvents().then((data) => {
-    //     setTimeline(data);
-    //     setTimelineLoading(false);
-    //   });
-
-    // getSponsors("All").then((data) => {
-    //     setSponsors(data);
-    //     setSponsorsLoading(false);
-    //     const validdata = data.filter((sponsor)=>sponsor.level === "Gold" || sponsor.level ==="Silver" || sponsor.level === "Bronze");
-    //     console.log(validdata);
-    //   }
-    // );
+  const [grid, setGrid] = useState([] as IContact[]);
+  const [isGridLoading, setGridLoading] = useState(true);
 
+  const loadingTimeout = ()=>{setTimeout(() => setIsLoadingAnimComplete(true), 1000);}
+
 
 
   useEffect(() => {
     const fetchData = async () => {
+
+      getReachUs().then((data) => {
+        setGrid(data);
+      }).catch((err) => {
+        console.error("Error fetching data:", err);
+        setError("Failed to load data. Please try again later.");
+      }
+      ).finally(() => {
+        setGridLoading(false);
+      });
+
+
+
       try {
         const data = await getDataFromAggregatedDoc();
 
@@ -403,12 +350,12 @@ export default function Home() {
       )}
 
       <div id="reach_us" className="scroll-mt-20">
-        <GridBackground title="Reach Us">
+        {!isGridLoading && <GridBackground title="Reach Us">
           <ReachUsSection grid={grid} />
-        </GridBackground>
+        </GridBackground>}
       </div>
 
       <Footer />
   </RootLayout>
 );
-}
+}
diff --git a/src/components/blocks/reach-us-section.tsx b/src/components/blocks/reach-us-section.tsx
@@ -1,7 +1,8 @@
+import { IContact } from "@/interfaces/IContacts";
 import React from "react";
 import { useId } from "react";
 
-export default function ReachUsSection({grid}:{grid:{name:string,phone:string,email:string,position:string}[]}) {
+export default function ReachUsSection({grid}:{grid:IContact[]}) {
   return (
     <div className="py-20 lg:py-40 mx-8">
       <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-15 md:gap-10 sm:gap-5 max-w-7xl mx-auto">
@@ -11,15 +12,15 @@ export default function ReachUsSection({grid}:{grid:{name:string,phone:string,em
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-2xl font-bold dark:text-custom-color-600 text-custom-dark-color-900">{person.name}</h2>
-               <p className="text-sm text-gray-600">{person.position}</p>
+               <p className="text-sm text-gray-600">{person.post}</p>
              </div>
            </div>
            <div className="flex flex-col items-left space-y-4">
              <div className="flex items-center space-x-2 pt-6">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.816 18 2 12.184 2 5V3z" />
                </svg>
-               <p className="text-gray-700 text-md">{person.phone}</p>
+               <p className="text-gray-700 text-md">{person.contact}</p>
              </div>
              <div className="flex items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
@@ -107,4 +108,4 @@ export function GridPattern({ width, height, x, y, squares, ...props }: any) {
       )}
     </svg>
   );
-}
+}