Merge branch 'main' into xCk27x

package.json

@@ -11,11 +11,13 @@
     "test": "playwright test"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "@supabase/supabase-js": "^2.45.3",
     "@tanstack/react-router": "^1.56.2",
+    "flowbite-react-icons": "^1.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "supabase": "^1.200.3"
+    "supabase": "^1.223.10"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.0",

src/components/DrawerOption.tsx

@@ -1,6 +1,7 @@
 import { Link } from "@tanstack/react-router";
+import { CaretDown, CaretRight } from "flowbite-react-icons/solid";
 import { useState } from "react";
-import { HStack, SidebarArrowDownIcon, SidebarArrowRightIcon, VStack } from "../components";
+import { HStack, VStack } from "../components";
 
 const options = [
     { name: "首頁", engName: "Home", pageNav: "/" },
@@ -29,9 +30,9 @@ export const DrawerOption = () => {
                 <HStack className="bg-blue-200" key={option.name}>
                     <div className="flex items-center" onClick={() => toggleOption(option.name)}>
                         {openOptions[option.name] ? (
-                            <SidebarArrowDownIcon fill="currentColor" stroke={"#B1B1B1"} size={20} />
+                            <CaretDown />
                         ) : (
-                            <SidebarArrowRightIcon fill="currentColor" stroke={"#B1B1B1"} size={20} />
+                            <CaretRight />
                         )}
                     </div>
                     <Link to={option.pageNav}>

src/components/icons/ClockIcon.tsx

@@ -0,0 +1,12 @@
+
+import React from 'react';
+import IconProps from '../interface/IconProps';
+import { BasicIcon } from './BasicIcon';
+
+export const ClockIcon: React.FC<IconProps> = ({ fill, stroke, size }) => (
+    <BasicIcon fill={fill} stroke={stroke} size={size}>
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+    </BasicIcon>
+);
+
+export default ClockIcon;

src/components/icons/PinIcon.tsx

@@ -0,0 +1,12 @@
+
+import React from 'react';
+import IconProps from '../interface/IconProps';
+import { BasicIcon } from './BasicIcon';
+
+export const PinIcon: React.FC<IconProps> = ({ fill, stroke, size }) => (
+    <BasicIcon fill={fill} stroke={stroke} size={size}>
+        <path fill-rule="evenodd" d="m7.539 14.841.003.003.002.002a.755.755 0 0 0 .912 0l.002-.002.003-.003.012-.009a5.57 5.57 0 0 0 .19-.153 15.588 15.588 0 0 0 2.046-2.082c1.101-1.362 2.291-3.342 2.291-5.597A5 5 0 0 0 3 7c0 2.255 1.19 4.235 2.292 5.597a15.591 15.591 0 0 0 2.046 2.082 8.916 8.916 0 0 0 .189.153l.012.01ZM8 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" clip-rule="evenodd" />
+    </BasicIcon>
+);
+
+export default PinIcon;

src/components/index.ts

@@ -7,7 +7,9 @@ export { Header } from './Header';
 // Icons
 export { BellIcon } from './icons/BellIcon';
 export { CalendarIcon } from './icons/CalendarIcon';
+export { ClockIcon } from './icons/ClockIcon';
 export { LogoutIcon } from './icons/LogoutIcon';
+export { PinIcon } from './icons/PinIcon';
 export { PlusIcon } from './icons/PlusIcon';
 export { SidebarArrowDownIcon } from './icons/SidebarArrowDownIcon';
 export { SidebarArrowRightIcon } from './icons/SidebarArrowRightIcon';

src/routes/events/create.tsx

@@ -35,6 +35,11 @@ function CreateEventScreen() {
   const [preview, setPreview] = useState<string>()
   const [inputs, setInputs] = useState({
     name: '',
+    start_time: '',
+    end_time: '',
+    location: '',
+    fee: 0,
+    description: ''
   })
 
   // create a preview as a side effect, whenever selected file is changed
@@ -106,6 +111,8 @@ function CreateEventScreen() {
             type="datetime-local"
             id="start-time"
             name="start-time"
+            value={inputs.start_time}
+            onChange={(text) => { setInputs({ ...inputs, start_time: text.target.value }) }}
           />
         </div>
         <div className="flex gap-3 mt-3 ms-4">
@@ -114,25 +121,33 @@ function CreateEventScreen() {
             type="datetime-local"
             id="end-time"
             name="end-time"
+            value={inputs.end_time}
+            onChange={(text) => { setInputs({ ...inputs, end_time: text.target.value }) }}
           />
         </div>
         <p style={styles.text}>活動地點</p>
         <input
           style={styles.input}
           className="rounded"
           placeholder="請輸入活動地點"
+          value={inputs.location}
+          onChange={(text) => { setInputs({ ...inputs, location: text.target.value }) }}
         />
         <p style={styles.text}>參加費用</p>
         <input
           style={styles.input}
           className="rounded"
           placeholder="請輸入參加費用(請輸入數字，無則填0)"
+          value={inputs.fee}
+          onChange={(text) => { setInputs({ ...inputs, fee: Number(text.target.value) }) }}
         />
         <p style={styles.text}>活動介紹</p>
         <input
           style={styles.input}
           className="rounded"
           placeholder="請介紹你的活動"
+          value={inputs.description}
+          onChange={(text) => { setInputs({ ...inputs, description: text.target.value }) }}
         />
       </div>
       <div className='mt-3 ms-2'>