refac: separate components

Author: aster-void

contents/banner.ts

@@ -1,11 +1,4 @@
-type Banner = {
-  shown: boolean;
-  kind: "notify" | "error";
-  long: string;
-  short: string;
-  link: string;
-  linkText?: string;
-};
+import type { Banner } from "+/schema.ts";
 const banner: Banner = {
   shown: true,
   kind: "notify",

src/components/ActivityPage/Layout.astro

@@ -1,6 +1,6 @@
 ---
 import { Picture } from "astro:assets";
-import JoinUsCTA from "+/components/JoinUsCTA.astro";
+import JoinUsCTA from "+/components/common/JoinUsCTA.astro";
 import GlobalLayout from "+/layouts/GlobalLayout.astro";
 import { Focus } from "+/schema";
 import type { ImageMetadata } from "astro";

src/components/Header.astro

@@ -0,0 +1,32 @@
+---
+import type { Banner } from "+/schema.ts";
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  banner: Banner;
+}
+const { banner } = Astro.props;
+---
+
+<div
+  id="banner"
+  class:list={[
+    "flex items-center justify-center gap-4 px-1 py-2",
+    banner.kind === "error" ? "bg-red-300" : "bg-green-300",
+  ]}
+>
+  <span class="hidden md:inline">{banner.long}</span>
+  <span aria-hidden class="sm:text-md inline text-center text-sm md:hidden">
+    {banner.short}
+  </span>
+  <a
+    href={banner.link}
+    class="md:text-md inline-flex flex-shrink-0 items-center gap-0.5 text-sm hover:underline"
+    rel={banner.link.startsWith("/") ? undefined : "noreferrer"}
+    target={banner.link.startsWith("/") ? undefined : "_blank"}
+    data-astro-prefetch="viewport"
+  >
+    {banner.linkText ?? "詳細はこちら"}
+    <Icon name="feather:arrow-right" />
+  </a>
+</div>

src/components/Header/Banner.astro

@@ -0,0 +1,65 @@
+---
+import Logo from "+/components/utils/Logo.astro";
+import HamburgerButton from "+/islands/svelte/hamburger-button.svelte";
+import { Focus } from "+/schema.ts";
+
+type Props = {
+  links: { href: string; title: string; focus: Focus }[];
+  focus: Focus;
+};
+const { links, focus }: Props = Astro.props;
+---
+
+<div class="flex h-16 bg-gray-50/70 backdrop-blur-lg">
+  <a
+    href="/"
+    aria-label="Go to top page"
+    class="flex items-center px-4"
+    data-astro-prefetch="viewport"
+  >
+    <Logo class="w-36 sm:ml-8" variant="default" />
+  </a>
+  <div aria-hidden="true" class="flex-1"></div>
+  <nav class="hidden md:flex">
+    {
+      links.map((link) => (
+        <a
+          href={link.href}
+          class:list={[
+            "navigation-bar flex h-full min-w-24 items-center justify-center px-6 text-center text-sm",
+            focus === link.focus ? "current" : "",
+          ]}
+          data-astro-prefetch="viewport"
+        >
+          {link.title}
+        </a>
+      ))
+    }
+  </nav>
+  <div class="md:hidden">
+    <HamburgerButton {links} />
+  </div>
+</div>
+
+<style>
+  .navigation-bar {
+    background: linear-gradient(black 0 0) bottom left/
+      var(--underline-width, 0%) 0.09rem no-repeat;
+    text-decoration: none;
+  }
+  .navigation-bar.current {
+    background: linear-gradient(lawngreen 0 0) bottom left/
+      var(--underline-width, 0%) 0.15rem no-repeat;
+  }
+  .navigation-bar:hover {
+    --underline-width: 100%;
+    @starting-style {
+      --underline-width: 0%;
+    }
+  }
+  @media not (prefers-reduced-motion) {
+    .navigation-bar {
+      transition: background-size 0.5s;
+    }
+  }
+</style>

src/components/Header/NavBar.astro

@@ -1,7 +1,7 @@
 ---
+import ActionButton from "+/components/utils/ActionButton.astro";
+import Logo from "+/components/utils/Logo.astro";
 import { Icon } from "astro-icon/components";
-import ActionButton from "./ActionButton.astro";
-import Logo from "./Logo.astro";
 ---
 
 <footer class="bg-base-content text-base-200 p-18">

src/components/ArticleList.astro src/components/common/ArticleList.astrosrc/components/ArticleList.astro renamed to src/components/common/ArticleList.astro

@@ -0,0 +1,24 @@
+---
+import Banner from "+/components/Header/Banner.astro";
+import NavBar from "+/components/Header/NavBar.astro";
+import { Focus } from "+/schema.ts";
+import banner from "+contents/banner.ts";
+
+const links = [
+  { title: "プロジェクト", href: "/projects", focus: Focus.projects },
+  { title: "記事", href: "/articles", focus: Focus.articles },
+  { title: "メンバー", href: "/members", focus: Focus.members },
+  { title: "参加", href: "/join", focus: Focus.join },
+  { title: "About", href: "/about", focus: Focus.about },
+];
+
+interface Props {
+  focus: Focus;
+}
+const { focus } = Astro.props;
+---
+
+<header class="sticky top-0 z-20 w-full">
+  {banner.shown && <Banner banner={banner} />}
+  <NavBar links={links} focus={focus} />
+</header>

src/components/Footer.astro src/components/common/Footer.astrosrc/components/Footer.astro renamed to src/components/common/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import ActionButton from "./ActionButton.astro";
+import ActionButton from "+/components/utils/ActionButton.astro";
 interface Props {
   class?: string;
 }