feat : add scrollable events list

NCUAppTeam · Nov 23, 2024 · 6b0f71a · 6b0f71a
1 parent 75057fc
commit 6b0f71a
Showing 1 changed file with 31 additions and 17 deletions.
diff --git a/src/routes/events/index.tsx b/src/routes/events/index.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { BellIcon, ClockIcon, Header, PinIcon, PlusIcon } from '../../components';
+import { Clock } from "flowbite-react-icons/solid";
+import { BellIcon, Header, PinIcon, PlusIcon } from '../../components';
 import { AuthGuard } from '../../utils/auth';
 import { supabase } from '../../utils/supabase';
 interface Event {
@@ -42,24 +43,32 @@ function EventIndex() {
         <Header />
         <div className="flex-1 bg-gray-800 p-4">
           <h1 className="ml-4 text-xl text-white">最新揪人</h1>
-          <div className="grid grid-cols-2 gap-4 mt-2">
-            {events.map((event) => (
-              <EventCard key={event.id} event={event} />
-            ))}
+          <div className="overflow-x-auto mt-2">
+            <div className="flex space-x-4">
+              {events.map((event) => (
+                <EventCard key={event.id} event={event} />
+              ))}
+            </div>
           </div>
 
           <h1 className="ml-4 text-xl text-white mt-8">最新活動</h1>
-          <div className="grid grid-cols-2 gap-4 mt-2">
-            {events.map((event) => (
-              <EventCard key={event.id} event={event} />
-            ))}
+          <div className="overflow-x-auto mt-2">
+            <div className="flex space-x-4">
+              {events.map((event) => (
+                <EventCard key={event.id} event={event} />
+              ))}
+            </div>
           </div>
-      </div>
-        <button className="btn btn-circle fixed right-4 bottom-4" onClick={()=>{
-          if(document){
-            (document.getElementById('my_modal_4') as HTMLFormElement).showModal();
+        </div>
+
+        <button
+          className="btn btn-circle fixed right-4 bottom-4"
+          onClick={() => {
+            if (document) {
+              (document.getElementById('my_modal_4') as HTMLFormElement).showModal();
             }
-          }}>
+          }}
+        >
           <PlusIcon />
           <dialog id="my_modal_4" className="modal">
             <div className="modal-box w-11/12 max-w-5xl">
@@ -69,7 +78,12 @@ function EventIndex() {
               </div>
               <p className="py-4 text-xl">確定要新增嗎？</p>
               <div className="modal-action flex justify-between">
-              <button className="btn w-1/2" onClick={() => navigate({ to: '/events/create' })}>好</button>
+                <button
+                  className="btn w-1/2"
+                  onClick={() => navigate({ to: '/events/create' })}
+                >
+                  好
+                </button>
                 <form method="dialog" className="w-1/2">
                   {/* This button will close the dialog */}
                   <button className="btn w-full">取消</button>
@@ -86,12 +100,12 @@ function EventIndex() {
 function EventCard({ event }: { event: Event }) {
   const startTime = event.start_time ? new Date(event.start_time) : new Date();
   return (
-    <div className="bg-gray-700 rounded-lg overflow-hidden text-white">
+    <div className="flex-shrink-0 w-40 bg-gray-700 rounded-lg overflow-hidden text-white">
       <div className="h-32 bg-gray-500" />
       <div className="p-2">
         <h3 className="text-lg mb-1">{event.name}</h3>
         <p className="text-sm flex items-center">
-          <ClockIcon fill="currentColor" stroke="#ffffff" size={24} />
+          <Clock fill="currentColor" stroke="#ffffff" size={24} />
           {startTime.toLocaleString('zh-TW', {
             month: '2-digit',
             day: '2-digit',