simplify Header markup

yuheiy · Jan 4, 2024 · 88ba6ea · 88ba6ea
1 parent a15064b
commit 88ba6ea
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -12,19 +12,19 @@ const { title, isHome } = Astro.props;
 const Components = isHome
   ? ({
       Root: 'header',
-      Nav: 'div',
+      Nav: Fragment,
       Header: 'div',
     } as const)
   : ({
-      Root: 'div',
+      Root: Fragment,
       Nav: 'nav',
       Header: 'header',
     } as const);
 ---
 
-<Components.Root class="wrapper">
-  <Components.Nav class="pt-16 text-sm text-dynamic-muted kerning-normal">
-    <p>
+<Components.Root>
+  <Components.Nav>
+    <p class="wrapper pt-16 text-sm text-dynamic-muted kerning-normal">
       {/* eslint-disable-next-line astro/jsx-a11y/anchor-is-valid */}
       <a class="flex w-fit items-center gap-x-3" href={isHome ? null : '/'}>
         <img
@@ -39,9 +39,9 @@ const Components = isHome
     </p>
   </Components.Nav>
 
-  <Components.Header class="space-y-8">
+  <Components.Header class="wrapper mt-8 space-y-8">
     <h1
-      class="mt-8 text-2xl font-bold leading-tight kerning-all [text-wrap:pretty] [word-break:auto-phrase]"
+      class="text-2xl font-bold leading-tight kerning-all [text-wrap:pretty] [word-break:auto-phrase]"
       set:html={title}
     />
     <slot />