Merge branch 'NCUAppTeam:main' into main

.gitignore

@@ -17,6 +17,7 @@ dev-dist
 .idea
 .DS_Store
 .env
+
 *.suo
 *.ntvs*
 *.njsproj

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/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/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/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

@@ -1,13 +1,16 @@
 // Common Components
-export { Center } from './Common/Center';
 export { Button } from './Common/customButton';
 export { HStack } from './Common/HStack';
 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 { 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/components/pages/dinner/filter.tsx

@@ -0,0 +1,49 @@
+import { VStack } from "../../../components";
+
+
+export const Filter = () => {
+    const streets = [
+        '校内', '宵夜街', '後門', '奢侈巷'
+    ];
+
+    return (
+        <VStack>
+            <div id="meal" className="grid justify-items-center mt-10">
+                <p className="font-bold text-4xl text-center">找正餐</p>
+                <div className="w-2/3 grid grid-rows-2 grid-flow-col gap-6 columns-2 mt-4">
+                    {
+                        streets.map((street) => (
+                            <button key={street} className="btn bg-[#fdf7d2] text-xl text-[#8b7342] border-2 border-[#8b7342]">
+                                {street}
+                            </button>
+                        ))
+                    }
+                </div>
+            </div>
+            <div id="drink" className="grid justify-items-center mt-10">
+                <p className="font-bold text-4xl text-center">找飲料</p>
+                <div className="w-2/3 grid grid-rows-2 grid-flow-col gap-6 columns-2 mt-4">
+                    {
+                        streets.map((street) => (
+                            <button key={street} className="btn bg-[#fdf7d2] text-xl text-[#8b7342] border-2 border-[#8b7342]">
+                                {street}
+                            </button>
+                        ))
+                    }
+                </div>
+            </div>
+            <div id="midnight-snack" className="grid justify-items-center mt-10">
+                <p className="font-bold text-4xl text-center">找宵夜</p>
+                <div className="w-2/3 grid grid-flow-col gap-6 columns-2 mt-4">
+                    {
+                        streets.slice(1, 3).map((street) => (
+                            <button key={street} className="btn bg-[#fdf7d2] text-xl text-[#8b7342] border-2 border-[#8b7342]">
+                                {street}
+                            </button>
+                        ))
+                    }
+                </div>
+            </div>
+        </VStack >
+    );
+};