feat: Update Navbar component with responsive styling and search functionality

Author: druvkotwani

client/src/app/components/Footer.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const Footer = () => {
   return (
-    <footer className="text-center mt-8 pb-4 text-gray-500 font-sourcecodepro">
+    <footer className=" text-center mt-8 py-4 text-gray-500 font-sourcecodepro">
       <p>
         Made with{" "}
         <span aria-label="heart" role="img">

client/src/app/components/Navbar.tsx

@@ -4,8 +4,14 @@ import Image from "next/image";
 import Link from "next/link";
 import React, { useState } from "react";
 
-const Navbar: React.FC = () => {
+type NavbarProps = {
+  search: string;
+  setSearch: React.Dispatch<React.SetStateAction<string>>;
+};
+
+const Navbar: React.FC<NavbarProps> = ({ search, setSearch }) => {
   const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+
   return (
     <nav className="bg-[#0e0e0e] z-10 border-b border-b-white fixed top-0 left-0 w-full md:px-8 px-4  py-4 flex justify-around items-center">
       {/* Logo */}
@@ -22,6 +28,8 @@ const Navbar: React.FC = () => {
       <form className="">
         <div className="relative flex ">
           <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
             type="text"
             placeholder="Search by username"
             className="bg-[#1f1f1f] sm:w-[260px] w-[100px] font-sourcecodepro text-white rounded px-4 py-3  focus:outline-none pl-10"

client/src/app/page.tsx

@@ -14,6 +14,9 @@ import "react-toastify/dist/ReactToastify.css";
 export default function Home() {
   const { datas, setDatas } = useContext(DataContext);
   const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState<string>("");
+  const [showStats, setShowStats] = useState(false);
+
   const fetchData = async () => {
     try {
       const res = await fetch("/api/fetchdata");
@@ -30,7 +33,10 @@ export default function Home() {
     fetchData();
   }, [datas]);
 
-  const [showStats, setShowStats] = useState(false);
+  const searchedData = datas?.filter((data: any) =>
+    data.profileData.fullName.toLowerCase().includes(search.toLowerCase())
+  );
+
   return (
     <section className="px-4 lg:px-24 relative ">
       <button
@@ -45,14 +51,14 @@ export default function Home() {
         />
       </button>
 
-      <Navbar />
+      <Navbar search={search} setSearch={setSearch} />
 
       <GenerateStats showStats={showStats} setShowStats={setShowStats} />
 
-      <div className="mt-32 max-w-7xl mx-auto  place-items-center grid grid-cols-1 md:grid-cols-2 gap-y-8 xl:grid-cols-3 font-sourcecodepro gap-x-4">
+      <div className="mt-32  max-w-7xl mx-auto  place-items-center grid grid-cols-1 md:grid-cols-2 gap-y-8 xl:grid-cols-3 font-sourcecodepro gap-x-4">
         <PromotionCard />
-        {datas &&
-          datas
+        {searchedData &&
+          searchedData
             .sort(
               (a: any, b: any) =>
                 new Date(b.timeStamp).getTime() -