Merge pull request #37 from crow-fox/fix/header

Fix/header
crow-fox · May 6, 2024 · 73e436a · 73e436a
2 parents 42d9390 + d508ed9
commit 73e436a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 21 deletions.
diff --git a/app/_components/Logo.tsx b/app/_components/Logo.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { ReactNode } from "react";
+
+type Props = {
+  className?: string;
+  children: ReactNode;
+};
+
+export function Logo({ className, children }: Props) {
+  const pathname = usePathname();
+  const isTopPage = pathname === "/";
+
+  return (
+    <>
+      {isTopPage ? (
+        <h1 className={className}>{children}</h1>
+      ) : (
+        <p className={className}>{children}</p>
+      )}
+    </>
+  );
+}
diff --git a/app/_features/darkmode/ThemeSelect.tsx → app/_components/ThemeSelect.tsx b/app/_features/darkmode/ThemeSelect.tsx → app/_components/ThemeSelect.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { ThemeProvider } from "next-themes";
-import { ThemeSelect } from "@/app/_features/darkmode/ThemeSelect";
 import Link from "next/link";
+import { Logo } from "@/app/_components/Logo";
+import { ThemeSelect } from "@/app/_components/ThemeSelect";
 
 export const metadata: Metadata = {
   title: {
@@ -22,26 +23,24 @@ export default function RootLayout({
         <ThemeProvider>
           <div className=" flex min-h-svh flex-col bg-white font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-200">
             <header className=" grid grid-cols-[minmax(1rem,1fr)_minmax(0,80rem)_minmax(1rem,1fr)] border-b border-gray-200 p-4  dark:border-gray-700">
-              <nav className=" grid [grid-column:2]">
-                <ul className=" flex flex-wrap items-center gap-4">
-                  <li className=" mr-auto">
-                    <Link href="/" className="underline underline-offset-2">
-                      ホーム
-                    </Link>
-                  </li>
-                  <li>
+              <div className="flex flex-wrap items-center justify-between gap-4 [grid-column:2]">
+                <Logo>
+                  <Link href="/" className="text-lg font-bold">
+                    Tailwind Color Contrast Grid
+                  </Link>
+                </Logo>
+                <div className=" flex flex-wrap items-center gap-4">
+                  <p>
                     <Link
                       href="/reference"
                       className="underline underline-offset-2"
                     >
                       参考サイト
                     </Link>
-                  </li>
-                  <li>
-                    <ThemeSelect />
-                  </li>
-                </ul>
-              </nav>
+                  </p>
+                  <ThemeSelect />
+                </div>
+              </div>
             </header>
             <main className="grid grid-cols-[minmax(1rem,1fr)_minmax(0,80rem)_minmax(1rem,1fr)] py-8 ">
               <div className=" [grid-column:2]">{children}</div>

diff --git a/app/page.tsx b/app/page.tsx
@@ -12,12 +12,9 @@ export default function Home() {
 
   return (
     <div className="grid gap-y-8">
-      <div className=" grid gap-y-2">
-        <h1 className=" text-lg font-bold">Tailwind Color Contrast Grid</h1>
-        <Suspense fallback={<p>読み込み中...</p>}>
-          <ColorController tailwindColors={tailwindColors} />
-        </Suspense>
-      </div>
+      <Suspense fallback={<p>読み込み中...</p>}>
+        <ColorController tailwindColors={tailwindColors} />
+      </Suspense>
       <ColorGridTable />
     </div>
   );