fix: toggle banner visibility and enhance header accessibility

- Set `showBanner` state to `false` by default in `page.tsx` - Refactor `Header.tsx` to use semantic HTML elements and improve accessibility - Add `role="banner"` to the header - Wrap navigation links in a `nav` element with `aria-label` - Use `span` elements for link text to improve semantics - Add `rel="noopener noreferrer"` and `aria-label` to the GitHub link - Add `aria-hidden="true"` to the GitHub icon
sing1ee · Feb 14, 2025 · e7a9e7b · e7a9e7b
1 parent 24d89c0
commit e7a9e7b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
@@ -41,7 +41,7 @@ export default function Home() {
   let [messages, setMessages] = useState<{ role: string; content: string }[]>(
     [],
   );
-  let [showBanner, setShowBanner] = useState(true);
+  let [showBanner, setShowBanner] = useState(false);
 
   let loading = status === "creating" || status === "updating";
 

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,25 +3,39 @@ import GithubIcon from "./github-icon";
 
 export default function Header() {
   return (
-    <header className="relative mx-auto mt-5 flex w-full items-center justify-between px-2 pb-7 sm:px-4">
-      <div className="flex gap-8">
-        <Link href="/" className="flex items-center gap-2">
-          <h1 className="text-xl tracking-tight">
-            DeepSeek R1 Code Generator
-          </h1>
-        </Link>
-        <Link href="/deepseek-image-generator" className="flex items-center gap-2">
-          <h1 className="text-xl tracking-tight">
-            DeepSeek Image Generator
-          </h1>
-        </Link>
-      </div>
+    <header className="relative mx-auto mt-5 flex w-full items-center justify-between px-2 pb-7 sm:px-4" role="banner">
+      <nav aria-label="main navigation">
+        <ul className="flex gap-8">
+          <li>
+            <Link 
+              href="/" 
+              className="flex items-center gap-2 text-gray-600 hover:text-gray-900"
+            >
+              <span className="text-xl tracking-tight">
+                DeepSeek R1 Code Generator
+              </span>
+            </Link>
+          </li>
+          <li>
+            <Link 
+              href="/deepseek-image-generator" 
+              className="flex items-center gap-2 text-gray-600 hover:text-gray-900"
+            >
+              <span className="text-xl tracking-tight">
+                DeepSeek Image Generator
+              </span>
+            </Link>
+          </li>
+        </ul>
+      </nav>
       <a
         href="https://github.com/sing1ee/deepseekCoder"
         target="_blank"
+        rel="noopener noreferrer"
         className="hidden items-center gap-3 rounded-2xl bg-white px-6 py-2 sm:flex"
+        aria-label="访问 GitHub 仓库"
       >
-        <GithubIcon className="h-4 w-4" />
+        <GithubIcon className="h-4 w-4" aria-hidden="true" />
         <span>GitHub Repo</span>
       </a>
     </header>