Merge pull request #1 from sitcon-tw/feature/layout

Feature/layout
sitcon-tw · Feb 2, 2025 · 3c164ad · 3c164ad
2 parents e2db3cf + 879abd3
commit 3c164ad
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 8 deletions.
diff --git a/src/app/(screens)/fragment/page.tsx b/src/app/(screens)/fragment/page.tsx
@@ -0,0 +1,7 @@
+export default function FragmentPage() {
+  return (
+    <>
+      <p>板塊頁面</p>
+    </>
+  );
+}
diff --git a/src/app/(screens)/game/page.tsx b/src/app/(screens)/game/page.tsx
@@ -0,0 +1,7 @@
+export default function GamePage() {
+  return (
+    <>
+      <p>遊戲頁面</p>
+    </>
+  );
+}
diff --git a/src/app/(screens)/personal/page.tsx b/src/app/(screens)/personal/page.tsx
@@ -0,0 +1,7 @@
+export default function PersonalPage() {
+  return (
+    <>
+      <p>個人頁面</p>
+    </>
+  );
+}
diff --git a/src/app/(screens)/store/page.tsx b/src/app/(screens)/store/page.tsx
@@ -0,0 +1,7 @@
+export default function StorePage() {
+  return (
+    <>
+      <p>商店頁面</p>
+    </>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,10 @@
-import type { Metadata } from "next";
-import "./globals.css";
-import texts from "@/data/metadata.json";
+"use client";
 
-export const metadata: Metadata = {
-  title: texts.title,
-  description: texts.description,
-};
+import "./globals.css";
+import Link from "next/link";
+import { Blocks, Gamepad, LucideIcon, Store, UserRound } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { usePathname } from "next/navigation";
 
 export default function RootLayout({
   children,
@@ -14,7 +13,43 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="zh-Hant-TW">
-      <body className="m-4 h-screen">{children}</body>
+      <body className="flex h-screen flex-col overflow-hidden">
+        <div className="h-full w-full">{children}</div>
+        <div className="w-full">
+          <footer className="flex border-t-2 border-gray-400 bg-gray-200 px-2 py-2 text-center text-sm text-gray-600">
+            <NavbarItem href="/" name="遊戲" Icon={Gamepad} />
+            <NavbarItem href="/fragment" name="板塊" Icon={Blocks} />
+            <NavbarItem href="/store" name="商店" Icon={Store} />
+            <NavbarItem href="/personal" name="個人" Icon={UserRound} />
+          </footer>
+        </div>
+      </body>
     </html>
   );
 }
+
+function NavbarItem({
+  href,
+  name,
+  Icon,
+}: Readonly<{
+  href: string;
+  name: string;
+  Icon: LucideIcon;
+}>) {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+  return (
+    <Link href={href} className="flex-1 px-4">
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center gap-1 px-3 py-1",
+          isActive && "border-b-2 border-blue-500 text-blue-500",
+        )}
+      >
+        <Icon strokeWidth={2} size={32} />
+        {name}
+      </div>
+    </Link>
+  );
+}