Merge pull request #4 from NCUAppTeam/main

UI updates and Refactoring

Author: 1989ONCE

.env.example

@@ -0,0 +1,4 @@
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
+VITE_NCU_PORTAL_CLIENT_ID=
+VITE_NCU_PORTAL_CLIENT_SECRET=

.env.exmaple

@@ -73,12 +73,22 @@ Tailwind 的配置檔位於 `tailwind.config.js`。
 
 ### 環境配置
 
-要與 Supabase 資料庫互動，你需要設置 `.env.local` 檔案，並填入以下變數：
+要與 Supabase 資料庫互動，你需要設置 `.env` 檔案（模板可參考`.env.example`)，並填入以下變數：
 
 ```
 VITE_SUPABASE_URL=your-supabase-url
 VITE_SUPABASE_ANON_KEY=your-supabase-key
 ```
+若您為中央大學學生，想在本地端測試、使用portal註冊功能，則需先於portal申請portal開發成員：
+申請時的Single Sign On Url填為：http://localhost:5173
+       Return To Address填為：http://localhost:5173/callback
+
+`.env`檔則填入申請後說得到的client-id和client-secret：
+```
+VITE_NCU_PORTAL_CLIENT_ID=
+VITE_NCU_PORTAL_CLIENT_SECRET=
+```
+
 
 ### Edge Functions
 

README.md

@@ -23,6 +23,7 @@
     "node-fetch": "^3.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "react-router-dom": "^7.4.0",
     "save-dev": "^0.0.1-security",
     "spin-wheel-game": "^1.0.3-alpha.3",
@@ -60,4 +61,4 @@
     "sharp": "0.32.6",
     "sharp-ico": "0.1.5"
   }
-}
+}

package-lock.json

@@ -4,5 +4,5 @@ export { DialogBox } from './Common/DialogBox';
 export { HStack } from './Common/HStack';
 export { Image } from './Common/Image';
 export { VStack } from './Common/VStack';
-export { Header } from './Header';
+export { Header } from './pages/home/Header';
 

package.json

@@ -0,0 +1,71 @@
+import { HStack, VStack } from "../..";
+
+// for future use of other function development
+// const options = [
+//     { name: "首頁", engName: "Home", pageNav: "/" },
+//     { name: "活動/揪人", engName: "Events", pageNav: "/events" },
+//     { name: "拍賣", engName: "Market", pageNav: "/sales" },
+//     { name: "行事曆", engName: "Calendar", pageNav: "/calendar" },
+//     { name: "地圖", engName: "Map", pageNav: "/map" },
+//     { name: "今晚吃什麼", engName: "Dinner Decider", pageNav: "/dinner" },
+// ];
+const options = [
+    { name: "首頁", engName: "Home", pageNav: "/" },
+    { name: "揪人", engName: "Gather 'Round", pageNav: "/events" },
+    { name: "綠洲拾橡", engName: "Acorn Trails in the Oasis", pageNav: "/dinner" },
+];
+
+export const DrawerOption = () => {
+    // for future use of several function in one page
+    // const [openOptions, setOpenOptions] = useState<{ [key: string]: boolean }>({});
+
+    // const toggleOption = (name: string) => {
+    //     setOpenOptions((prev) => {
+    //         return {
+    //             ...prev,
+    //             [name]: !prev[name],
+    //         };
+    //     });
+    // };
+
+    return (
+        <VStack id="all-nav-func" className="gap-2">
+            {options.map((option) => (
+                <li
+                    key={option.name}
+                    onClick={() => window.location.href = option.pageNav}
+                    className="cursor-pointer p-2 rounded-md hover:bg-gray-200 lg:w-full lg:flex lg:items-center lg:justify-between lg:gap-4 lg:p-2 lg:border lg:border-gray-300 lg:shadow-sm"
+                >
+                    <HStack className="lg:gap-2">
+                        <VStack className="justify-start">
+                            <p className="font-medium lg:text-lg">{option.name}</p>
+                            <p className="text-sm text-gray-500 lg:text-base">{option.engName}</p>
+                        </VStack>
+                    </HStack>
+                </li>
+            ))}
+        </VStack>
+
+        // for future use of several function in one page
+        // <VStack id="all-nav-func">
+        //     {options.map((option) => (
+        //         <HStack className="bg-blue-200" key={option.name}>
+        //             <div className="flex items-center" onClick={() => toggleOption(option.name)}>
+        //                 {openOptions[option.name] ? (
+        //                     <CaretDown />
+        //                 ) : (
+        //                     <CaretRight />
+        //                 )}
+        //             </div>
+        //             <Link to={option.pageNav}>
+        //                 <li className="bg-white">
+        //                     <VStack className="justify-start">
+        //                         <p className="bg-green-100">{option.name}({option.engName})</p>
+        //                     </VStack>
+        //                 </li>
+        //             </Link>
+        //         </HStack>
+        //     ))}
+        // </VStack>
+    );
+};

src/components/DrawerOption.tsx

@@ -0,0 +1,44 @@
+import { Image, VStack } from "../..";
+import { DrawerOption } from "./DrawerOption";
+import SidebarFooter from "./SidebarFooter";
+
+export const DrawerSideBar = ({ name, avatar }: { name: string, avatar: string }) => {
+    return (
+        <div className="flex xl:sticky xl:top-0">
+            {/* Drawer for smaller screens */}
+            <div className="px-3 py-4 w-fit xl:hidden drawer z-40" title='開啟側邊欄 Open sidebar'>
+                <input id="my-drawer" type="checkbox" className="drawer-toggle" />
+                <div className="drawer-content">
+                    <label htmlFor="my-drawer" className="drawer-button">
+                        <Image src={avatar} children={undefined} className="w-10 rounded-full" />
+                    </label>
+                </div>
+                <div className="drawer-side grid content-between">
+                    <label htmlFor="my-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
+                    <ul className="menu bg-base-200 text-base-content h-screen w-80 p-4 grid overflow-y-auto">
+                        <VStack className="h-full self-start">
+                            <Image src={avatar} children={undefined} className="mb-2 w-10 rounded-full" />
+                            <p className="font-bold">{name}</p>
+                            <p className="text-xs">View Profile</p>
+                            <div className="divider divider-neutral" />
+                            <DrawerOption />
+                        </VStack>
+                        <SidebarFooter />
+                    </ul>
+                </div>
+            </div>
+
+            {/* Fixed sidebar for larger screens */}
+            <div className="hidden xl:flex flex-col bg-base-200 text-base-content h-screen w-80 p-4 overflow-y-auto">
+                <VStack className="w-full h-full self-start">
+                    <Image src={avatar} children={undefined} className="mb-2 w-10 rounded-full" />
+                    <p className="font-bold">{name}</p>
+                    <p className="text-xs">View Profile</p>
+                    <div className="divider divider-neutral" />
+                    <DrawerOption />
+                </VStack>
+                <SidebarFooter />
+            </div>
+        </div>
+    );
+};