Merge pull request #117 from 1989ONCE/main

food decider's buttons
NCUAppTeam · Oct 8, 2024 · 1812669 · 1812669
2 parents 8cf41a5 + cd091ab
commit 1812669
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 21 deletions.
diff --git a/src/components/Common/Center.tsx b/src/components/Common/Center.tsx
diff --git 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/filter.tsx 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/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
@@ -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 />
         </>
     )
 }
diff --git 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>