專案架構

.gitignore

@@ -16,6 +16,7 @@ dev-dist
 # Editor directories and files
 .idea
 .DS_Store
+.env
 *.suo
 *.ntvs*
 *.njsproj

package.json

@@ -14,7 +14,8 @@
     "@supabase/supabase-js": "^2.45.3",
     "@tanstack/react-router": "^1.56.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "supabase": "^1.200.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.0",
@@ -27,6 +28,7 @@
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.10",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",

src/components/Common/Center.tsx

@@ -0,0 +1,9 @@
+import ChildrenProps from '../interface/ChildrenProps';
+
+export const Center = ({ children }: ChildrenProps) => {
+    return (
+        <div className="flex mx-auto">
+            {children}
+        </div>
+    );
+};

src/components/Common/HStack.tsx

@@ -0,0 +1,9 @@
+import ChildrenProps from '../interface/ChildrenProps';
+
+export const HStack = ({ children, className }: ChildrenProps) => {
+  return (
+    <div className={`flex flex-row ${className}`}>
+      {children}
+    </div>
+  );
+};

src/components/Common/Image.tsx

@@ -0,0 +1,10 @@
+import ImageProps from '../interface/ImageProps';
+
+export const Image = ({ children, className, src, alt }: ImageProps) => {
+    return (
+        <>
+            <img className={className} src={src} alt={alt} />
+            {children}
+        </>
+    );
+};

src/components/Common/VStack.tsx

@@ -0,0 +1,9 @@
+import ChildrenProps from '../interface/ChildrenProps';
+
+export const VStack = ({ children, className }: ChildrenProps) => {
+    return (
+        <div className={`flex flex-col ${className}`}>
+            {children}
+        </div>
+    );
+};

src/components/Common/customButton.tsx

@@ -0,0 +1,9 @@
+import ButtonProps from "../interface/ButtonProps";
+
+export const Button = ({ children, type, className, onClick }: ButtonProps) => (
+  <button onClick={onClick} type={type} className={className}>
+
+    {children}
+
+  </button>
+);

src/components/DrawerOption.tsx

@@ -0,0 +1,27 @@
+import { Link } from "@tanstack/react-router";
+import { CalendarIcon, VStack } from "../components";
+
+const options = [
+    { name: "活動/揪人", engName: "Events", pageNav: "/events", icon: CalendarIcon },
+    { name: "拍賣", engName: "Market", pageNav: "/sales", icon: CalendarIcon },
+    { name: "行事曆", engName: "Calendar", pageNav: "/calendar", icon: CalendarIcon },
+    { name: "地圖", engName: "Map", pageNav: "/map", icon: CalendarIcon },
+    { name: "今晚吃什麼", engName: "Dinner Decider", pageNav: "/dinner", icon: CalendarIcon },
+];
+
+export const DrawerOption = () => {
+    return (
+        <VStack id="all-nav-func">
+            {options.map((option) => (
+                <Link to={option.pageNav}>
+                    <li key={option.name}>
+                        <VStack className="justify-start">
+                            <a>{option.name}</a>
+                            <a>{option.engName}</a>
+                        </VStack>
+                    </li>
+                </Link>
+            ))}
+        </VStack>
+    );
+};

src/components/DrawerSideBar.tsx

@@ -0,0 +1,40 @@
+import { Image, VStack } from "../components";
+import { DrawerOption } from "./DrawerOption";
+
+const UserInfo = {
+    name: "NCU APP",
+    avatar: "src/assets/logo.png"
+};
+
+export const DrawerSideBar = () => {
+    return (
+        <div className="flex w-fit drawer">
+            <input id="my-drawer" type="checkbox" className="drawer-toggle" />
+
+            {/* Drawer Portal */}
+            <div className="drawer-content">
+                <label htmlFor="my-drawer" className="drawer-button">
+                    <Image src={UserInfo.avatar} children={undefined} className='w-10 rounded-full'></Image>
+                </label>
+            </div>
+
+            {/* Indise Drawer */}
+            <div className="drawer-side">
+                <label htmlFor="my-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
+
+                <ul className="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+                    {/* Sidebar content here */}
+                    <VStack id="user-avatar">
+                        <Image src={UserInfo.avatar} children={undefined} className='mb-2 w-10 rounded-full'></Image>
+                        <text className="font-bold">{UserInfo.name}</text>
+                        <text className="text-xs">View Profile</text>
+                    </VStack>
+
+                    <div className="divider divider-neutral" />
+
+                    <DrawerOption />
+                </ul>
+            </div>
+        </div>
+    );
+};

src/components/icons/BasicIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import IconProps from '../interface/IconProps';
+
+export const BasicIcon: React.FC<IconProps & { children: React.ReactNode }> = ({ color = 'currentColor', size = 24, children }) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke={color}
+        width={size}
+        height={size}
+        className={`size-${size}`}
+    >
+        {children}
+    </svg>
+);
+

src/components/icons/CalendarIcon.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import IconProps from '../interface/IconProps';
+import { BasicIcon } from './BasicIcon';
+
+export const CalendarIcon: React.FC<IconProps> = ({ color, size }) => (
+    <BasicIcon color={color} size={size}>
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+        />
+    </BasicIcon>
+);
+
+export default CalendarIcon;

src/components/icons/LogoutIcon.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import IconProps from '../interface/IconProps';
+import { BasicIcon } from './BasicIcon';
+
+export const LogoutIcon: React.FC<IconProps> = ({ color, size }) => (
+    <BasicIcon color={color} size={size}>
+        <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9"
+        />
+    </BasicIcon>
+);
+
+export default LogoutIcon;

src/components/index.ts

@@ -0,0 +1,10 @@
+// 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';
+// Icons
+export { CalendarIcon } from './icons/CalendarIcon';
+export { LogoutIcon } from './icons/LogoutIcon';
+

src/components/interface/ButtonProps.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    type?: 'submit' | 'reset' | 'button';
+    className?: string;
+}
+
+export default ButtonProps;

src/components/interface/ChildrenProps.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+interface ChildrenProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+
+}export default ChildrenProps;

src/components/interface/IconProps.tsx

@@ -0,0 +1,6 @@
+interface IconProps {
+    color?: string;
+    size?: number;
+}
+
+export default IconProps;

src/components/interface/ImageProps.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface ImageProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    className?: string;
+    src?: string;
+    alt?: string;
+}
+
+export default ImageProps;