Merge pull request #27 from crow-fox/add-reference-page

Add reference page
crow-fox · May 2, 2024 · 3edeeb5 · 3edeeb5
2 parents 41b64ce + 92e68e6
commit 3edeeb5
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 2 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ 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";
 
 export const metadata: Metadata = {
   title: "Tailwind Color Contrast Grid",
@@ -17,8 +18,27 @@ export default function RootLayout({
       <body>
         <ThemeProvider>
           <div className="grid min-h-svh grid-rows-[auto_1fr_auto] bg-white font-mono text-gray-900 dark:bg-gray-950 dark:text-gray-200">
-            <header className=" grid justify-end px-4 pt-4">
-              <ThemeSelect />
+            <header className=" grid border-b border-gray-200 p-4 dark:border-gray-700">
+              <nav>
+                <ul className=" flex flex-wrap items-center gap-4">
+                  <li className=" mr-auto">
+                    <Link href="/" className="underline underline-offset-2">
+                      ホーム
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      href="/reference"
+                      className="underline underline-offset-2"
+                    >
+                      参考サイト
+                    </Link>
+                  </li>
+                  <li>
+                    <ThemeSelect />
+                  </li>
+                </ul>
+              </nav>
             </header>
             <main className="px-4 py-8">{children}</main>
             <footer className="p-4">

diff --git a/app/reference/page.tsx b/app/reference/page.tsx
@@ -0,0 +1,47 @@
+const references = [
+  {
+    title: "Customizing Colors - Tailwind CSS",
+    href: "https://tailwindcss.com/docs/customizing-colors",
+  },
+  {
+    title: "EightShapes Contrast Grid",
+    href: "https://contrast-grid.eightshapes.com",
+  },
+  {
+    title: "Web Content Accessibility Guidelines (WCAG) 2.2",
+    href: "https://www.w3.org/TR/WCAG22/",
+  },
+] as const satisfies { title: string; href: string }[];
+
+export default function ReferencePage() {
+  return (
+    <div className="mx-auto grid w-[min(100%,40rem)] gap-y-8">
+      <div className=" grid gap-y-4 ">
+        <h1 className=" text-lg font-bold">参考サイト</h1>
+        <ul className=" grid list-disc gap-y-2 pl-4">
+          {references.map((reference) => (
+            <li key={reference.href}>
+              <ReferenceLink href={reference.href}>
+                {reference.title}
+              </ReferenceLink>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+function ReferenceLink({
+  href,
+  children,
+}: Readonly<{
+  href: string;
+  children: React.ReactNode;
+}>) {
+  return (
+    <a href={href} className=" underline underline-offset-2">
+      {children}
+    </a>
+  );
+}