Merge pull request #46 from IEEE-Student-Branch-NSBM/feat/events-Page

feat(events): update event components and add new page and assets

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@react-google-maps/api": "^2.19.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/app/events-page/page.tsx

@@ -0,0 +1,38 @@
+import TwentyOneEvents from "@/components/events-page-tabs/2021-events";
+import TwentyTwoEvents from "@/components/events-page-tabs/2022-events";
+import TwentyThreeEvents from "@/components/events-page-tabs/2023-events";
+import TwentyFourEvents from "@/components/events-page-tabs/2024-events";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function EventsPage() {
+  return (
+    <div className="container mx-auto">
+      <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-wider text-center mt-10 mb-5">
+        EVENTS
+      </h1>
+      <Tabs
+        defaultValue="2024"
+        className="container mx-auto mt-3 max-w-[390px] md:max-w-[700px] lg:max-w-[990px] xl:max-w-[1200px]"
+      >
+        <TabsList className="grid grid-cols-4">
+          <TabsTrigger value="2024">2024</TabsTrigger>
+          <TabsTrigger value="2023">2023</TabsTrigger>
+          <TabsTrigger value="2022">2022</TabsTrigger>
+          <TabsTrigger value="2021">2021</TabsTrigger>
+        </TabsList>
+        <TabsContent value="2024">
+          <TwentyFourEvents />
+        </TabsContent>
+        <TabsContent value="2023">
+          <TwentyThreeEvents />
+        </TabsContent>
+        <TabsContent value="2022">
+          <TwentyTwoEvents />
+        </TabsContent>
+        <TabsContent value="2021">
+          <TwentyOneEvents />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/components/events-page-tabs/2021-events.tsx

@@ -40,7 +40,7 @@ export default function TwentyOneEvents() {
           </p>
         </CardContent>
         <CardFooter>
-          <Button asChild className="bg-blue-950 text-white border-none">
+          <Button asChild className="bg-blue text-white border-none">
             <Link href="#">View More</Link>
           </Button>
         </CardFooter>

src/components/events-page-tabs/2022-events.tsx

@@ -40,7 +40,7 @@ export default function TwentyTwoEvents() {
           </p>
         </CardContent>
         <CardFooter>
-          <Button asChild className="bg-blue-950 text-white border-none">
+          <Button asChild className="bg-blue text-white border-none">
             <Link href="#">View More</Link>
           </Button>
         </CardFooter>

src/components/events-page-tabs/2023-events.tsx

@@ -40,7 +40,7 @@ export default function TwentyThreeEvents() {
           </p>
         </CardContent>
         <CardFooter>
-          <Button asChild className="bg-blue-950 text-white border-none">
+          <Button asChild className="bg-blue text-white border-none">
             <Link href="#">View More</Link>
           </Button>
         </CardFooter>

src/components/events-page-tabs/2024-events.tsx

@@ -40,7 +40,7 @@ export default function TwentyFourEvents() {
           </p>
         </CardContent>
         <CardFooter>
-          <Button asChild className="bg-blue-950 text-white border-none">
+          <Button asChild className="bg-blue text-white border-none">
             <Link href={event.link}>View More</Link>
           </Button>
         </CardFooter>

src/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/constants/routes.constants.ts

@@ -9,7 +9,7 @@ export const ROUTES: { [key: string]: Route } = {
     label: "Home",
   },
   EVENTS: {
-    url: "/#events",
+    url: "/events-page",
     label: "Events",
   },
   BLOG: {