feat: Events inner page added

next.config.mjs

@@ -9,6 +9,19 @@ const nextConfig = {
         },
     },
 
+    async rewrites() {
+      return [
+        {
+          source: '/e/:id',
+          destination: '/event/:id',
+        },
+        {
+          source: '/events/:id',
+          destination: '/event/:id',
+        },
+      ]
+    },
+
     webpack: (config, { isServer }) => {
         // Add SVGR loader
         config.module.rules.push({

src/app/event/[id]/components/event-carousel.tsx

@@ -0,0 +1,140 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+
+import React, { useEffect } from "react";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Button from "@/components/Button";
+import { BodyLarge, Heading3 } from "@/components/type-styles";
+import useIsVerySmallScreen from "@/components/hooks/useIsVerySmallScreen";
+
+interface EventCarouselProps {
+  children: React.ReactNode[];
+  title: string;
+  limit?: {
+    sm?: number;
+    lg?: number;
+    xl?: number;
+  };
+}
+
+const defaultLimit = {
+  sm: 2,
+  lg: 3,
+  xl: 3,
+};
+
+export default function EventCarousel({
+  children,
+  title,
+  limit = defaultLimit,
+}: EventCarouselProps) {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const length = children.length;
+  const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
+  const isSmallScreen = useIsVerySmallScreen();
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  function carouselNext() {
+    if (api) api.scrollNext();
+  }
+
+  function carouselPrev() {
+    if (api) api.scrollPrev();
+  }
+
+  return (
+    <div className="w-full flex flex-col gap-4 md:gap-4 mt-3">
+      <div className="flex justify-between items-center gap-x-8 gap-y-4">
+        <div className="flex items-center gap-3">
+          <Heading3>{title}</Heading3>
+          <BodyLarge className="text-onBackgroundTertiary">{`(${children.length})`}</BodyLarge>
+        </div>
+        {!isSmallScreen && (
+          <div
+            className={`flex items-center gap-2 ${
+              length <= (limit.xl || defaultLimit.xl) ? "xl:hidden" : ""
+            } ${length <= (limit.lg || defaultLimit.lg) ? "lg:hidden" : ""} ${
+              length <= (limit.sm || defaultLimit.sm) ? "sm:hidden" : ""
+            }`}
+          >
+            <Button
+              onClick={carouselPrev}
+              disabled={!api?.canScrollPrev()}
+              variant="secondary"
+            >
+              <Icon icon="maki:arrow" className="w-auto h-auto rotate-180	" />
+            </Button>
+            <Button
+              onClick={carouselNext}
+              disabled={!api?.canScrollNext()}
+              variant="secondary"
+            >
+              <Icon icon="maki:arrow" className="w-auto h-auto " />
+            </Button>
+          </div>
+        )}
+      </div>
+      <Carousel
+        opts={{
+          align: "start",
+          loop: false,
+        }}
+        className="w-full"
+        setApi={setApi}
+        overflow={isSmallScreen}
+      >
+        <CarouselContent>
+          {children.map((child, index) => (
+            <CarouselItem
+              className={`${
+                limit.sm === 1
+                  ? "sm:basis-full"
+                  : `sm:basis-1/${Math.min(
+                      length,
+                      limit.sm || defaultLimit.sm,
+                      limit.lg || defaultLimit.lg,
+                      limit.xl || defaultLimit.xl
+                    )}`
+              } ${
+                limit.lg === 1
+                  ? "lg:basis-full"
+                  : `lg:basis-1/${Math.min(
+                      length,
+                      limit.lg || defaultLimit.lg,
+                      limit.xl || defaultLimit.xl
+                    )}`
+              } ${
+                limit.xl === 1
+                  ? "xl:basis-full"
+                  : `xl:basis-1/${Math.min(
+                      length,
+                      limit.xl || defaultLimit.xl
+                    )}`
+              }`}
+              key={index}
+            >
+              {child}
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  );
+}

src/app/event/[id]/components/event-gallery.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Image from "next/image";
+import { Card } from "@/components/ui/card";
+
+export default function EventCard() {
+  return (
+    <Card className="w-full rounded-lg aspect-square overflow-hidden shadow-none">
+      <Image
+        src={"/images/9cb106030ddb6e6761ba6e6237de936e.png"}
+        alt={""}
+        width={1920}
+        height={1080}
+        className="w-1fr aspect-square object-cover mx-auto"
+      />
+    </Card>
+  );
+}

src/app/event/[id]/components/mentor-card.tsx

@@ -0,0 +1,32 @@
+import SocialRow from "@/app/contributors/components/social-row";
+import { Body, Heading3 } from "@/components/type-styles";
+import { Card, CardFooter, CardHeader } from "@/components/ui/card";
+import Image from "next/image";
+import React from "react";
+
+export default function MentorCard() {
+  return (
+    <Card className="bg-surfacePrimary border-borderPrimary flex flex-col justify-between shadow-none overflow-hidden">
+      <CardHeader className="flex flex-col justify-around">
+        <Image
+          src="/assets/images/team-photos/bengeorgenetto.png"
+          alt={""}
+          width={100}
+          height={100}
+          className="bg-backgroundEmPrimary rounded-full w-[100px] h-[100px] object-cover mb-4"
+        />
+        <Heading3>Ben George Netto</Heading3>
+        <Body className="text-onBackgroundSecondary">Community Lead</Body>
+      </CardHeader>
+      <CardFooter className=" flex gap-3 ">
+        <SocialRow
+          socials={{
+            twitter: "gdscmbcet",
+            linkedin: "gdscmbcet",
+            website: "gdscmbcet",
+          }}
+        ></SocialRow>
+      </CardFooter>
+    </Card>
+  );
+}

src/app/event/[id]/components/skill-card.tsx

@@ -0,0 +1,25 @@
+import { Heading5, BodySmall } from "@/components/type-styles";
+import { Card } from "@/components/ui/card";
+import { GithubLogo } from "@phosphor-icons/react";
+import Image from "next/image";
+import React from "react";
+
+export default function SkillsCard() {
+  return (
+    <Card className="bg-surfacePrimary border-borderPrimary flex items-center p-3 py-4 gap-3 overflow-hidden shadow-none">
+      <div className="p-3 rounded-xl bg-backgroundEmPrimary">
+        <GithubLogo
+          size={32}
+          weight="fill"
+          className="text-onBackgroundEmPrimary"
+        />
+      </div>
+      <div className="flex flex-col gap-1">
+        <Heading5>Web Development</Heading5>
+        <BodySmall className="text-onBackgroundSecondary">
+          Fundamentals of Developing Web Applications
+        </BodySmall>
+      </div>
+    </Card>
+  );
+}

src/app/event/[id]/components/sponsor-card.tsx

@@ -0,0 +1,29 @@
+import Button from "@/components/Button";
+import { Body, Heading3 } from "@/components/type-styles";
+import { Card, CardFooter, CardHeader } from "@/components/ui/card";
+import Image from "next/image";
+import React from "react";
+import SponsorImage from "@/../public/assets/images/sponsors/sticker-mule.png";
+
+export default function SponsorCard() {
+  return (
+    <Card className="flex flex-col justify-between bg-surfacePrimary border-borderPrimary overflow-hidden shadow-none">
+      <CardHeader className="flex flex-col justify-around">
+        <Image
+          src={SponsorImage}
+          alt={""}
+          width={100}
+          height={100}
+          className="bg-backgroundEmPrimary rounded-xl w-[48px] h-[48px] object-cover mb-4"
+        />
+        <Heading3>Devfolio</Heading3>
+        <Body className="text-onBackgroundSecondary">Gold Sponsor</Body>
+      </CardHeader>
+      <CardFooter className=" flex gap-3 ">
+        <Button variant="secondary" className="w-full">
+          Learn more
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

src/app/event/[id]/components/testimonial-card.tsx

@@ -0,0 +1,34 @@
+import { Body, BodySmall, Heading5 } from "@/components/type-styles";
+import { Card, CardFooter, CardHeader } from "@/components/ui/card";
+import Image from "next/image";
+import React from "react";
+
+export default function TestimonialCard() {
+  return (
+    <Card className="bg-surfacePrimary border-borderPrimary rounded-lg rounded-bl-none gap-2 flex flex-col overflow-hidden shadow-none">
+      <CardHeader>
+        <Body className="text-onBackgroundSecondary">
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio
+          soluta quos impedit, laboriosam ipsum aspernatur provident id quam
+          nihil aliquid voluptatem molestiae tempore molestias tempora obcaecati
+          dolore, harum sapiente iusto.
+        </Body>
+      </CardHeader>
+      <CardFooter>
+        <Image
+          src="/assets/images/team-photos/bengeorgenetto.png"
+          alt={""}
+          width={42}
+          height={42}
+          className="bg-backgroundEmPrimary rounded-xl w-[42px] h-[42px] object-cover"
+        />
+        <div className="px-3">
+          <Heading5>Ben George Netto</Heading5>
+          <BodySmall className="text-onBackgroundTertiary">
+            1 year ago
+          </BodySmall>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}