feat: add member page

Dev-TRANs · Apr 28, 2024 · 8805104 · 8805104
1 parent ed09c00
commit 8805104
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 9 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -5,8 +5,15 @@ import IconInstagram from '@tabler/icons-preact/dist/esm/icons/IconBrandInstagra
 import IconX from '@tabler/icons-preact/dist/esm/icons/IconBrandX.mjs'
 // @ts-ignore
 import IconThreads from '@tabler/icons-preact/dist/esm/icons/IconBrandThreads.mjs'
+
+interface Props {
+  class?: string
+}
+const className = Astro.props.class
 ---
-<footer class="p-2 text-white">
+<footer class="p-2" class:list={[
+  className ?? 'text-white'
+]}>
   <div class="grid md:grid-cols-2 place-items-center">
     <div class="text-2xl font-bold">五所川原盛り上げ隊</div>
     <div>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,18 +1,20 @@
 ---
 import Logo from '../assets/logo.jpeg'
 import { Image } from 'astro:assets'
+
 interface Props {
-  isSticky: boolean
+  isSticky?: boolean
 }
 ---
-<header class="top-0 w-full" class:list={[Astro.props.isSticky ? 'sticky' : 'fixed']}>
+<header class="top-0 w-full z-30" class:list={[Astro.props.isSticky ? 'sticky' : 'fixed']}>
   <div class="w-full grid p-3 grid-cols-1 md:grid-cols-2">
     <div class="flex items-center w-full gap-1">
       <Image src={Logo} alt='五所川原盛り上げ隊' class="w-12 h-12 rounded-full" width={120} height={120} />
     </div>
-    <div class="hidden md:grid place-items-center grid-cols-2 bg-white rounded-full p-1 rounded-tr-none w-full">
-      <a class="header-link-btn wave" href="#links">Links</a>
-      <a class="header-link-btn wave" href="#contact">Contact</a>
+    <div class="hidden md:grid place-items-center grid-cols-3 bg-white rounded-full p-1 rounded-tr-none w-full">
+      <a class="header-link-btn wave" href="/members">Members</a>
+      <a class="header-link-btn wave" href="/#links">Links</a>
+      <a class="header-link-btn wave" href="/#contact">Contact</a>
     </div>
   </div>
 </header>

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -2,13 +2,16 @@
 import Base, { type Props as BaseProps } from "./Base.astro"
 import Header from "../components/Header.astro"
 import Footer from '../components/Footer.astro'
-export type Props = BaseProps & {}
+export type Props = BaseProps & {
+  isStickyHeader?: boolean
+  footerClass?: string
+}
 ---
 
 <Base {...Astro.props}>
-  <Header />
+  <Header isSticky={Astro.props.isStickyHeader} />
   <slot />
-  <Footer />
+  <Footer class={Astro.props.footerClass} />
 </Base>
 <script>
   import { wave } from "@ns/ha"

diff --git a/src/pages/members.astro b/src/pages/members.astro
@@ -0,0 +1,81 @@
+---
+import { Image } from 'astro:assets'
+import Page from '../layouts/Page.astro'
+
+const members: {
+  name: string
+  avater?: ImageMetadata
+  desc: string
+}[] = [
+  {
+    name: 'あああ あああ',
+    desc: 'よろしくお願いします！'
+  }
+]
+---
+<Page title="Members | 五所川原盛り上げ隊" isStickyHeader={true} footerClass="bg-slate-700 text-white">
+  <div class="fixed text-6xl members-title z-20 p-2 text-white w-full">
+    <div class="font-bold">Members</div>
+    <hr class="my-1" />
+  </div>
+  <div class="w-full h-[100dvh] bg-blue-500 z-10 bg-out fixed top-0 left-0"></div>
+  <div class="p-5">
+    <div class="text-5xl z-50 font-bold">Members</div>
+    <div class="py-1">五所川原盛り上げ隊のメンバー一覧です。</div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 py-3">
+      {
+        members.map(member => (<div class="flex flex-col justify-center text-center">
+          <div class="flex justify-center w-full">
+            <div class="w-24 h-24 rounded-full border">
+              {
+                member.avater && <Image src={member.avater ?? ''} alt='Icon' class="w-full h-full" />
+              }
+            </div>
+          </div>
+          <div class="font-bold">{member.name}</div>
+          <div class="text-slate-500">{member.desc}</div>
+        </div>))
+      }
+    </div>
+  </div>
+</Page>
+<style>
+  @keyframes big-title {
+    0% {
+      transform: translate(0%, 30dvh);
+    }
+    30% {
+      transform: translate(0%, 30dvh);
+    }
+
+    100% {
+      transform: translate(-200%, 30dvh);
+    }
+  }
+  .members-title {
+    animation-name: big-title;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes bg-out {
+    0% {
+      transform: scaleY(1);
+      opacity: 1;
+    }
+    30% {
+      transform: scaleY(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scaleY(0);
+      opacity: 0;
+    }
+  }
+  .bg-out {
+    animation-name: bg-out;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+    transform-origin: bottom center;
+  }
+</style>