Merge pull request #80 from AndrewCK24/3-match-feature

feat(comp): 修改 layout 樣式與導航元件互動方式

app/store/store.js

@@ -1,12 +1,10 @@
 import { configureStore } from "@reduxjs/toolkit";
 
-import userReducer from "../(protected)/user/user-slice";
 import lineupsReducer from "@/app/store/lineups-slice";
 import matchReducer from "../match/match-slice";
 
 const store = configureStore({
   reducer: {
-    user: userReducer,
     lineups: lineupsReducer,
     match: matchReducer,
   },

components/custom/court/index.jsx

@@ -3,7 +3,7 @@ import { FiPlus, FiX, FiRepeat } from "react-icons/fi";
 
 export const Court = ({ children }) => {
   return (
-    <div className="flex flex-row items-center justify-center w-full max-h-[35vh] aspect-[11/9] rounded-lg bg-primary p-2">
+    <div className="flex flex-row items-center justify-center w-full max-h-[35vh] aspect-[11/9] bg-primary p-2">
       {children}
     </div>
   );

components/layout/Header.jsx

@@ -9,13 +9,12 @@ export const Header = () => {
   const router = useRouter();
   const pathArr = pathname.split("/").filter(Boolean);
   const isIndex = pathArr.length <= 1;
-  const handleBack = () => router.push(`/${pathArr[0]}`);
 
   return (
-    <header className="fixed w-full h-12 px-[5%] flex flex-row items-center justify-center gap-4 overscroll-none bg-primary-foreground">
+    <header className="fixed w-full h-12 px-[5%] flex flex-row items-center justify-center gap-4 overscroll-none bg-primary-foreground shadow-md">
       {isIndex || (
         <Button
-          onClick={handleBack}
+          onClick={() => router.back()}
           variant="ghost"
           size="icon"
           className="svg-[2rem]"

components/layout/Main.jsx

@@ -1,13 +1,18 @@
+"use client";
+import { useSelectedLayoutSegments } from "next/navigation";
 import { cn } from "@/lib/utils";
 
 export const Main = ({ children, className, ...props }) => {
+  const segments = useSelectedLayoutSegments();
+
   return (
     <main
       className={cn(
-        "flex-1 pt-[3.5rem] px-0 pb-[4.5rem]",
+        "flex-1 pt-[3rem] px-0 pb-[4.5rem]",
         "flex flex-col justify-start items-center gap-2 flex-nowrap",
         "overflow-scroll overscroll-y-contain z-0 bg-accent",
         "md:max-xl:px-[5%] transition-colors",
+        segments.length > 2 && "pb-4",
         className
       )}
       {...props}

components/layout/Nav.jsx

@@ -1,5 +1,6 @@
 "use client";
 import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { useUser } from "@/hooks/use-data";
 import { usePathname } from "next/navigation";
@@ -16,7 +17,9 @@ import {
 const NavLink = ({ children, className, ...props }) => (
   <Link
     className={cn(
-      "flex flex-col items-center justify-center flex-1 h-full pt-1 no-underline text-primary-foreground svg-[1.75rem] text-xs transition-all duration-200 ease-in-out",
+      "flex flex-col items-center justify-center flex-1 h-full pt-1",
+      "no-underline text-primary-foreground [&>svg]:w-7 [&>svg]:h-7 text-xs",
+      "transition-all duration-200 ease-in-out",
       className
     )}
     {...props}
@@ -28,6 +31,7 @@ const NavLink = ({ children, className, ...props }) => (
 export const Nav = () => {
   const dispatch = useDispatch();
   const pathname = usePathname();
+  const segments = useSelectedLayoutSegments();
   const { user } = useUser();
   const defaultTeamId = user?.teams?.joined[0] || null;
   const defaultTeamUrl = defaultTeamId
@@ -41,6 +45,8 @@ export const Nav = () => {
     return pathname.startsWith(path) ? activeClass : "";
   };
 
+  if (segments.length > 2) return null;
+
   return (
     <nav className="fixed bottom-0 left-0 w-full h-16 px-[5%] pt-0 pb-4 flex flex-row items-center justify-center bg-primary">
       <NavLink href="/" className={active("/")}>

components/ui/card.jsx

@@ -6,7 +6,7 @@ const Card = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn(
-      "flex flex-col gap-2 rounded-xl bg-card text-card-foreground shadow px-4 py-2",
+      "flex flex-col gap-2 bg-card text-card-foreground shadow px-4 py-2",
       className
     )}
     {...props}

components/ui/description.jsx

@@ -0,0 +1,20 @@
+export const Description = ({ startIcon, endIcon, children, ...props }) => {
+  return (
+    <div
+      className="flex flex-row [&>svg]:w-6 [&>svg]:h-6 gap-2 items-center basis-10 min-h-10"
+      {...props}
+    >
+      {startIcon}
+      <div className="flex flex-col flex-1">{children}</div>
+      {endIcon}
+    </div>
+  );
+};
+
+export const DescriptionTitle = ({ children }) => {
+  return <p className="font-semibold">{children}</p>;
+};
+
+export const DescriptionContent = ({ children }) => {
+  return <p className="text-muted-foreground">{children}</p>;
+};

hooks/use-data.js

@@ -51,9 +51,6 @@ export const useTeamMembers = (
   fetcher = defaultFetcher,
   options = {}
 ) => {
-  // TODO: 新增 conditional fetching
-  // if (!teamId) teamId = useSelector((state) => state.user.teams.joined[0]);
-
   const { data, error, isLoading, isValidating, mutate } = useSWR(
     `/api/teams/${teamId}/members`,
     fetcher,