From 5ac8ee88cd93a883d3b21b836fa556e5ed5791de Mon Sep 17 00:00:00 2001
From: 1989ONCE <susanloveselena@gmail.com>
Date: Tue, 8 Oct 2024 21:15:02 +0800
Subject: [PATCH 1/2] feat: dinner filter ui

---
 src/components/Common/Center.tsx              |  9 ----
 src/components/index.ts                       |  1 -
 src/components/pages/dinner/drink.tsx         |  0
 src/components/pages/dinner/filter.tsx        | 49 +++++++++++++++++++
 src/components/pages/dinner/meal.tsx          |  0
 src/components/pages/dinner/midnightSnack.tsx |  9 ++++
 src/routes/__root.tsx                         |  4 +-
 src/routes/dinner/index.tsx                   |  3 +-
 src/routes/index.tsx                          | 10 +---
 9 files changed, 64 insertions(+), 21 deletions(-)
 delete mode 100644 src/components/Common/Center.tsx
 create mode 100644 src/components/pages/dinner/drink.tsx
 create mode 100644 src/components/pages/dinner/filter.tsx
 create mode 100644 src/components/pages/dinner/meal.tsx
 create mode 100644 src/components/pages/dinner/midnightSnack.tsx

diff --git a/src/components/Common/Center.tsx b/src/components/Common/Center.tsx
deleted file mode 100644
index 8cc4670..0000000
--- a/src/components/Common/Center.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChildrenProps from '../interface/ChildrenProps';
-
-export const Center = ({ children }: ChildrenProps) => {
-    return (
-        <div className="flex mx-auto">
-            {children}
-        </div>
-    );
-};
diff --git a/src/components/index.ts b/src/components/index.ts
index 685bf76..2ae526f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,4 @@
 // Common Components
-export { Center } from './Common/Center';
 export { Button } from './Common/customButton';
 export { HStack } from './Common/HStack';
 export { Image } from './Common/Image';
diff --git a/src/components/pages/dinner/drink.tsx b/src/components/pages/dinner/drink.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/pages/dinner/filter.tsx b/src/components/pages/dinner/filter.tsx
new file mode 100644
index 0000000..542d6d2
--- /dev/null
+++ b/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 >
+    );
+};
diff --git a/src/components/pages/dinner/meal.tsx b/src/components/pages/dinner/meal.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/pages/dinner/midnightSnack.tsx b/src/components/pages/dinner/midnightSnack.tsx
new file mode 100644
index 0000000..a8fb42c
--- /dev/null
+++ b/src/components/pages/dinner/midnightSnack.tsx
@@ -0,0 +1,9 @@
+import { VStack } from "../../../components";
+
+export const MidnightSnack = () => {
+    return (
+        <VStack id="meal">
+
+        </VStack>
+    );
+};
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 2925ffc..cac2874 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -6,8 +6,8 @@ export const Route = createRootRoute({
 
 function RootComponent() {
   return (
-    <>
+    <div className='w-full'>
       <Outlet />
-    </ >
+    </div>
   )
 }
diff --git a/src/routes/dinner/index.tsx b/src/routes/dinner/index.tsx
index bc2512b..c4bd485 100644
--- a/src/routes/dinner/index.tsx
+++ b/src/routes/dinner/index.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { Header } from '../../components'
+import { Filter } from '../../components/pages/dinner/filter'
 import { AuthGuard } from '../../utils/auth'
 
 export const Route = createFileRoute('/dinner/')({
@@ -11,7 +12,7 @@ function DinnerIndex() {
     return (
         <>
             <Header />
-            <div>Hello /dinner/!</div>
+            <Filter />
         </>
     )
 }
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index c5b9bc5..bee5874 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -3,13 +3,6 @@ import { Header } from '../components';
 import { AuthGuard } from '../utils/auth';
 import { supabase } from '../utils/supabase';
 
-const styles = {
-    container: {
-        flex: 1,
-        backgroundColor: '#ffffff',
-    },
-};
-
 export const Route = createFileRoute('/')({
     beforeLoad: AuthGuard,
     loader: async () => {
@@ -37,7 +30,8 @@ function HomeIndex() {
     return (
         <>
             <Header />
-            <div style={styles.container} className='mx-auto space-y-4'>
+
+            <div className='grid justify-items-center w-full space-y-4'>
 
                 <div key={user[0].uuid} className='bg-blue-100 grid place-items-center'>
                     <h1>Name: {user[0].name}</h1>

From 647a34fe3f13b7e95c623c6a2f077fad02c6e76f Mon Sep 17 00:00:00 2001
From: 1989ONCE <susanloveselena@gmail.com>
Date: Tue, 8 Oct 2024 21:18:29 +0800
Subject: [PATCH 2/2] delete unnecessary files

---
 src/components/pages/dinner/drink.tsx         | 0
 src/components/pages/dinner/meal.tsx          | 0
 src/components/pages/dinner/midnightSnack.tsx | 9 ---------
 3 files changed, 9 deletions(-)
 delete mode 100644 src/components/pages/dinner/drink.tsx
 delete mode 100644 src/components/pages/dinner/meal.tsx
 delete mode 100644 src/components/pages/dinner/midnightSnack.tsx

diff --git a/src/components/pages/dinner/drink.tsx b/src/components/pages/dinner/drink.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/pages/dinner/meal.tsx b/src/components/pages/dinner/meal.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/pages/dinner/midnightSnack.tsx b/src/components/pages/dinner/midnightSnack.tsx
deleted file mode 100644
index a8fb42c..0000000
--- a/src/components/pages/dinner/midnightSnack.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { VStack } from "../../../components";
-
-export const MidnightSnack = () => {
-    return (
-        <VStack id="meal">
-
-        </VStack>
-    );
-};