feat: add search functionality for events with URL-based filtering an…

src/app/[locale]/events/page.tsx

@@ -46,15 +46,24 @@ export async function generateMetadata({
   };
 }
 
-export default function EventsPage() {
+export default function EventsPage({ searchParams }: { searchParams: { search?: string } }) {
   const t = useTranslations("Events");
+  const searchQuery = searchParams?.search?.toLowerCase() || "";
 
-  const upcomingEvents = events.filter((event) => {
+  const filteredEvents = events.filter((event) => {
+    const matchesSearch =
+      event.title.toLowerCase().includes(searchQuery) ||
+      event.description?.toLowerCase().includes(searchQuery);
+
+    return matchesSearch;
+  });
+
+  const upcomingEvents = filteredEvents.filter((event) => {
     const status = getEventStatus(event.startDateTime, event.endDateTime);
     return status === EVENT_STATUS.UPCOMING || status === EVENT_STATUS.ONGOING;
   });
 
-  const pastEvents = events.filter((event) => {
+  const pastEvents = filteredEvents.filter((event) => {
     const status = getEventStatus(event.startDateTime, event.endDateTime);
     return status === EVENT_STATUS.PAST;
   });
@@ -147,7 +156,13 @@ export default function EventsPage() {
 
         {upcomingEvents.length === 0 && pastEvents.length === 0 && (
           <div className="py-12 text-center">
-            <p className="text-slate-300">No events found.</p>
+            {searchQuery ? (
+              <p className="text-slate-300">
+                No results found for "<span className="text-sky-400">{searchQuery}</span>"
+              </p>
+            ) : (
+              <p className="text-slate-300">No events found.</p>
+            )}
           </div>
         )}
       </div>

src/components/common/navbar/index.tsx

@@ -20,6 +20,18 @@ import { XLogo } from "../icons/XLogo";
 const Navbar = () => {
   const [scrolled, setScrolled] = useState(false);
   const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    const delayDebounce = setTimeout(() => {
+      if (pathname.includes("/events")) {
+        router.push(`/events?search=${searchQuery}`);
+      }
+    }, 400);
+
+    return () => clearTimeout(delayDebounce);
+  }, [searchQuery]);
+
   const [hoveredIcon, setHoveredIcon] = useState<number | null>(null); // State for the icon hover
   const [activeSection, setActiveSection] = useState(false);
 
@@ -127,6 +139,16 @@ const Navbar = () => {
           })}
         </nav>
 
+        <div className="ml-4 hidden items-center lg:flex">
+          <input
+            type="text"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="rounded-md border border-slate-600 bg-slate-800 px-3 py-1 text-sm text-white outline-none focus:border-sky-400"
+          />
+        </div>
+
         <div className="hidden items-center gap-4 lg:flex">
           <ul
             className="relative flex items-center gap-0.5"