Enhancement: Add Loading Skeleton UI for Events Page (#174)

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

@@ -0,0 +1,43 @@
+function CardSkeleton({ className = "" }: { className?: string }) {
+  return (
+    <div className={`space-y-4 rounded-xl bg-slate-800 p-4 ${className}`}>
+      <div className="h-40 w-full rounded-lg bg-slate-700" />
+      <div className="space-y-2">
+        <div className="h-4 w-3/4 rounded bg-slate-700" />
+        <div className="h-4 w-1/2 rounded bg-slate-700" />
+      </div>
+      <div className="h-3 w-1/3 rounded bg-slate-700" />
+    </div>
+  );
+}
+
+export default function EventsLoading() {
+  return (
+    <div className="mx-auto max-w-7xl animate-pulse px-4 py-16 sm:px-6 lg:px-8">
+      {/* Title Skeleton */}
+      <div className="mb-10 space-y-3">
+        <div className="h-8 w-56 rounded bg-slate-700" />
+        <div className="h-4 w-80 rounded bg-slate-800" />
+      </div>
+
+      {/* Featured Section */}
+      <div className="grid gap-6 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <CardSkeleton className="h-full" />
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <CardSkeleton />
+          <CardSkeleton />
+        </div>
+      </div>
+
+      {/* Grid Section */}
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <CardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -46,15 +46,24 @@ export async function generateMetadata({
   };
 }
 
-export default function EventsPage() {
+export default async 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"