Merge pull request #118 from NelsonKCT/main

feat : add "hold new events" button

src/components/icons/BellIcon.tsx

@@ -0,0 +1,12 @@
+
+import React from 'react';
+import IconProps from '../interface/IconProps';
+import { BasicIcon } from './BasicIcon';
+
+export const BellIcon: React.FC<IconProps> = ({ fill, stroke, size }) => (
+    <BasicIcon fill={fill} stroke={stroke} size={size}>
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
+    </BasicIcon>
+);
+
+export default BellIcon;

src/components/icons/PlusIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import IconProps from '../interface/IconProps';
+import { BasicIcon } from './BasicIcon';
+
+export const PlusIcon: React.FC<IconProps> = ({ fill, stroke, size }) => (
+    <BasicIcon fill={fill} stroke={stroke} size={size}>
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </BasicIcon>
+);
+
+export default PlusIcon;

src/components/index.ts

@@ -5,8 +5,10 @@ export { Image } from './Common/Image';
 export { VStack } from './Common/VStack';
 export { Header } from './Header';
 // Icons
+export { BellIcon } from './icons/BellIcon';
 export { CalendarIcon } from './icons/CalendarIcon';
 export { LogoutIcon } from './icons/LogoutIcon';
+export { PlusIcon } from './icons/PlusIcon';
 export { SidebarArrowDownIcon } from './icons/SidebarArrowDownIcon';
 export { SidebarArrowRightIcon } from './icons/SidebarArrowRightIcon';
 

src/routes/events/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router';
-import { Header } from '../../components';
+import { BellIcon, Header, PlusIcon } from '../../components';
 import { AuthGuard } from '../../utils/auth';
 import { supabase } from '../../utils/supabase';
 
@@ -9,7 +9,6 @@ const styles = {
     backgroundColor: '#333333',
   },
 };
-
 export const Route = createFileRoute('/events/')({
   beforeLoad: AuthGuard,
   loader: async () => {
@@ -28,16 +27,42 @@ export const Route = createFileRoute('/events/')({
 
 function EventIndex() {
   const { events } = Route.useLoaderData()
+  const navigate = Route.useNavigate();
   return (
     <>
-      <Header />
-      <div style={styles.container}>
-        <h1 style={{ marginLeft: 140 }} className='text-lg text-white'>活動列表</h1>
-        {
-          events.map((event) => (
-            <Link key={event.id} to='/events/$eventId' params={{ eventId: event.id.toString() }} >{event.name}</Link>
-          ))
-        }
+      <div className="container mx-auto">
+        <Header />
+        <div style={styles.container}>
+          <h1 style={{ marginLeft: 140 }} className='text-lg text-white'>活動列表</h1>
+          {
+            events.map((event) => (
+              <Link key={event.id} to='/events/$eventId' params={{ eventId: event.id.toString() }} >{event.name}</Link>
+            ))
+          }
+        </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">
+              <div className="flex items-center justify-center">
+                <BellIcon />
+                <h3 className="font-bold text-2xl">通知</h3>
+              </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>
+                <form method="dialog" className="w-1/2">
+                  {/* This button will close the dialog */}
+                  <button className="btn w-full">取消</button>
+                </form>
+              </div>
+            </div>
+          </dialog>
+        </button>
       </div>
     </>
   )