add directions for day 1

package.json

@@ -22,9 +22,11 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@types/canvas-confetti": "^1.6.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.9.2",
+    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "embla-carousel": "^8.1.3",

src/components/eventpage/directions.tsx

@@ -0,0 +1,178 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from  "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import confetti from 'canvas-confetti';
+
+export default function DirectionList() {
+    const directions = [
+        {
+            title: "Day 1",
+            methods: [
+                {
+                    title: "Bencoolen MRT",
+                    direction: [
+                        {
+                            method: "Exit via Exit C",
+                            img: "/events/june/directions/Bencoolen_Exit C(Coming Out).webp"
+                        },
+                        {
+                            method: "Turn left and walk along this walkway",
+                            img: "/events/june/directions/Bencoolen_Exit C.webp"
+                        },
+                        {
+                            method: "Continue along this walkway",
+                            img: "/events/june/directions/Walkway From Bras Basah Exit C _ Bencoolen Exit C.webp"
+                        },
+                        {
+                            method: "Turn right and go up the escalator",
+                            img: "/events/june/directions/End of Walkway 1.webp"
+                        },
+                        {
+                            method: "Walk along this walkway",
+                            img: "/events/june/directions/Start of Walkway 2.webp"
+                        },
+                        {
+                            method: "Continue along this walkway",
+                            img: "/events/june/directions/Walkway 2 Continued.webp"
+                        },
+                        {
+                            method: "Turn right at the dead end and exit",
+                            img: "/events/june/directions/End of walkway 2_ Before Escalator to NAKA.webp"
+                        },
+                        {
+                            method: "Go up the escalator and turn right",
+                            img: "/events/june/directions/Escalator to NAKA.webp"
+                        },
+                        {
+                            method: "Enter and go to Level 2",
+                            img: "/events/june/directions/SOA_Security.webp"
+                        }
+                    ]
+                },
+                {
+                    title: "Bras Basah MRT",
+                    direction: [
+                        {
+                            method: "Exit via Exit B and turn right",
+                            img: "/events/june/directions/Bras Basah_Exit B.webp"
+                        },
+                        {
+                            method: "Turn left and go up the escalator",
+                            img: "/events/june/directions/End of Walkway 1.webp"
+                        },
+                        {
+                            method: "Walk along this walkway",
+                            img: "/events/june/directions/Start of Walkway 2.webp"
+                        },
+                        {
+                            method: "Continue along this walkway",
+                            img: "/events/june/directions/Walkway 2 Continued.webp"
+                        },
+                        {
+                            method: "Turn right at the dead end and exit",
+                            img: "/events/june/directions/End of walkway 2_ Before Escalator to NAKA.webp"
+                        },
+                        {
+                            method: "Go up the escalator and turn right",
+                            img: "/events/june/directions/Escalator to NAKA.webp"
+                        },
+                        {
+                            method: "Enter and go to Level 2",
+                            img: "/events/june/directions/SOA_Security.webp"
+                        }
+                    ]
+                },
+                {
+                    title: "Bus",
+                    direction: [
+                        {
+                            method: "Take a bus to the SMU (4) bus stop (04121)",
+                            img: "/events/june/directions/04121 Busstop.webp"
+                        },
+                        {
+                            method: "Go straight and turn left",
+                            img: "/events/june/directions/To NAKA from Bus Stop_ Lib pick up.webp"
+                        },
+                        {
+                            method: "Enter and go to Level 2",
+                            img: "/events/june/directions/SOA_Security.webp"
+                        }
+                    ]
+                },
+                {
+                    title: "Drop-off by Car",
+                    direction: [
+                        {
+                            method: "Drop off here at Li Ka Shing Library",
+                            img: "/events/june/directions/Library_Pick Up.webp"
+                        },
+                        {
+                            method: "Walk straight along the walkway",
+                            img: "/events/june/directions/Library pickup to NAKA_1.webp"
+                        },
+                        {
+                            method: "Turn left and go to the crossing and cross the road",
+                            img: "/events/june/directions/Library pickup to NAKA_2.webp"
+                        },
+                        {
+                            method: "After crossing, enter from from the bus stop and turn left",
+                            img: "/events/june/directions/To NAKA from Bus Stop_ Lib pick up.webp"
+                        },
+                        {
+                            method: "Enter and go to Level 2",
+                            img: "/events/june/directions/SOA_Security.webp"
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+    const days = directions.map(day => <TabsTrigger className="w-full" value={day.title}>{day.title}</TabsTrigger>);
+    const methods = directions.map(methods => (
+        <TabsContent value={methods.title}>
+            <Tabs>
+                <TabsList className="flex-wrap gap-y-1 w-full">
+                    {methods.methods.map(method => <TabsTrigger className="flex-1" value={method.title}>{method.title}</TabsTrigger>)}
+                </TabsList>
+                {methods.methods.map((method) => <TabsContent value={method.title}>
+                    {method.direction?.map((direction, index) => (
+                        <div>
+                            <img src={direction.img} alt="" className="rounded-xl ring ring-1 ring-slate-800 mt-6" />
+                            <div className="flex gap-x-2 mt-3 justify-center items-center">
+                                <h2 className="text-base">{index + 1}.</h2>
+                                <p>{direction.method}</p>
+                            </div>
+                        </div>
+                    ))}
+                    <div className="bg-slate-900 mt-7 mb-10 p-5 rounded-xl flex flex-col items-center">
+                    <h2 className="text-lg mb-4">You've reached!</h2>
+                    <Button
+                        onClick={() =>
+                        confetti({
+                            angle: randomInRange(55, 125),
+                            spread: randomInRange(50, 70),
+                            particleCount: randomInRange(50, 100),
+                            origin: { y: 0.6 },
+                        })
+                        }
+                        className="inline-flex items-center justify-center"
+                    >
+                        click me :)
+                    </Button>
+                    </div>
+                </TabsContent>)}
+            </Tabs>
+        </TabsContent>
+    ));
+    return (
+        <Tabs className="my-5">
+            <TabsList className="w-full">
+                {days}
+            </TabsList>
+            {methods}
+        </Tabs>
+    )
+};
+
+function randomInRange(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }

src/components/ui/tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 p-1 text-muted-foreground",
+      "inline-flex items-center justify-center rounded-md bg-slate-900 p-1 text-muted-foreground",
       className
     )}
     {...props}

src/content/config.ts

@@ -9,6 +9,7 @@ const eventsData = defineCollection({
   schema: z.object({
     title: z.string(),
     status: z.string(),
+    directions: z.string().optional(),
     luma: z.string().optional(),
     details: z.string().array(),
     excerpt: z.string(),

src/content/events/june.yaml

@@ -1,6 +1,7 @@
 title: June Conference
 status: closed
 luma: evt-FLWhONiYnpt8B3F
+directions: /events/june/directions
 details:
 - 'Workshops: 10th - 11th June'
 - 'Closing Ceremony: 14th June'

src/layout.astro

@@ -18,7 +18,7 @@ const { title, showTitle, desc } = Astro.props;
 	</head>
 	<body class="bg-slate-950">
 		<Nav client:load />
-		{showTitle && <h1 class="flex justify-center mt-10 mb-5">{title}</h1>}
+		{showTitle && <h1 class="text-center mt-10 mb-5">{title}</h1>}
 		<slot />
 		<Footer />
 	</body>

src/pages/events/[slug].astro

@@ -41,6 +41,19 @@ const { entry } = Astro.props;
           </Button>
         </div>
       }
+      {entry.data.directions &&
+        <div>
+          <Button>
+            <a
+              href={entry.data.directions}
+              class="flex items-center gap-x-2"
+            >
+              Directions
+              <ArrowRightIcon />
+            </a>
+          </Button>
+        </div>
+      }
       {entry.data.status !== 'closed' && <p set:html={entry.data.desc} /> }
       {entry.data.status == 'closed' && <p>Registration is closed! To modify your existing registration, please check for emails sent by lu.ma</p>}
       <Faq client:load faq={entry.data.faq} />

src/pages/events/june/directions.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "../../../layout.astro";
+import DirectionList from "../../../components/eventpage/directions";
+---
+<Layout title="Directions to June Conference" showTitle desc="">
+    <main class="max-w-2xl mx-auto px-4">
+        <p class="text-center">Select the day and the method of arrival to see directions</p>
+        <DirectionList client:load />
+    </main>
+</Layout>