Chanatpakorn/web 14 home members (#19)

* feat:fetch octokit

* feat: members

* feat: desktop animation and ring

* refactor: home animation

* refactor: camel case

* refactor: del console log

package.json

@@ -22,6 +22,7 @@
     "@astrojs/tailwind": "5.1.0",
     "@fontsource-variable/space-grotesk": "5.0.16",
     "@fontsource/noto-sans-thai-looped": "5.0.8",
+    "@octokit/types": "12.4.0",
     "astro": "4.2.1",
     "sharp": "0.33.2",
     "tailwindcss": "3.4.1",

src/components/member/Members.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import ProfileCard from "./ProfileCard.svelte";
+  import RightTick from "./RightTick.svelte";
+  import type { OrgMember } from "./types.ts";
+  export let members: OrgMember[];
+</script>
+
+<section>
+  <div
+    class="mb-20 flex flex-col items-center justify-center gap-4 px-8 text-center"
+  >
+    <div class="w-3/4">
+      <p class="text-4xl font-medium text-white">Members</p>
+      <div class="mt-6 flex w-full flex-col justify-center lg:my-20">
+        <div class="inline-flex flex-wrap justify-center">
+          {#if !members || members.length === 0}
+            <p>No Public Members found...</p>
+          {:else}
+            {#each members as member}
+              <ProfileCard
+                username={member.login}
+                avatarURL={member.avatar_url}
+                profileURL={member.html_url}
+              />
+            {/each}
+          {/if}
+        </div>
+      </div>
+    </div>
+    <a href="https://github.com/orgs/isd-sgcu/people">
+      <button
+        class="item-center rounded-lg border border-[#807F7E] bg-transparent px-4 py-2 font-normal text-[#807F7E] duration-100 hover:bg-[#807F7E] hover:text-primary"
+      >
+        All members
+        <RightTick classProps="inline-block" />
+      </button>
+    </a>
+  </div>
+</section>

src/components/member/ProfileCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  export let username: string;
+  export let avatarURL: string;
+  export let profileURL: string;
+</script>
+
+<div>
+  <div class="mx-2 my-4 inline-block">
+    <a class="no-underline" title={username} href={profileURL}>
+      <div
+        id="profile"
+        class="rounded bg-[#232428] p-2 text-white duration-200 hover:scale-110"
+      >
+        <div class="flex flex-row items-center">
+          <img
+            id="image-profile"
+            alt={username}
+            class="mr-2 h-8 w-8 rounded-full"
+            src={avatarURL}
+          />
+          <p class="text-sm">
+            @ {username}
+          </p>
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+
+<style lang="post-css">
+  #image-profile {
+    width: 30px;
+    height: 30px;
+  }
+</style>

src/components/member/RightTick.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let classProps: string;
+</script>
+
+<svg
+  class={classProps}
+  width="16"
+  height="17"
+  viewBox="0 0 16 17"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Keyboard arrow right" clip-path="url(#clip0_1401_1011)">
+    <path
+      id="Vector"
+      d="M5.72656 11.394L8.7799 8.33398L5.72656 5.27398L6.66656 4.33398L10.6666 8.33398L6.66656 12.334L5.72656 11.394Z"
+      fill="#807F7E"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_1401_1011">
+      <rect
+        width="16"
+        height="16"
+        fill="white"
+        transform="translate(0 0.333984)"
+      />
+    </clipPath>
+  </defs>
+</svg>

src/components/member/types.ts

@@ -0,0 +1,6 @@
+import type { Endpoints } from "@octokit/types";
+
+export type OrgMember =
+  Endpoints["GET /orgs/{org}/public_members"]["response"]["data"][number];
+
+export type GitHubUser = Pick<OrgMember, "avatar_url" | "login" | "html_url">;

src/pages/index.astro

@@ -3,39 +3,58 @@ import Layout from "@/layouts/Layout.astro";
 
 import ISDLogo from "@/assets/isd_logo.svg";
 import { Image } from "astro:assets";
+import Members from "@/components/member/Members.svelte";
+
+const fetchOrgMembers = async () => {
+  try {
+    const res = await fetch(
+      "https://api.github.com/orgs/isd-sgcu/public_members",
+    );
+    const data = await res.json();
+    return data;
+  } catch (err) {
+    console.error(err);
+  }
+};
+const orgMembers = await fetchOrgMembers();
 ---
 
 <Layout title="Home" description="Main page">
   <section
-    class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-gradient-to-b from-black to-indigo-950 text-4xl font-bold text-white md:text-6xl lg:-translate-y-32"
+    class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-black to-indigo-950 text-4xl font-bold text-white md:text-6xl lg:-translate-y-32"
   >
+    <!-- pink -->
     <div
-      class="invisible absolute left-64 top-44 h-24 w-24 rounded-full bg-pink-600 sm:visible lg:h-36 lg:w-36"
+      class="absolute left-16 top-16 aspect-square w-24 animate-sliding-left rounded-full bg-pink-600 duration-100 lg:left-32 lg:top-44"
     >
     </div>
     <div
-      class="invisible absolute right-0 top-32 h-[600px] w-[300px] rounded-bl-full border-l-[45px] border-blue-700 sm:visible lg:h-[221px] lg:w-[260px]"
+      class="duration-50 absolute -right-16 bottom-16 aspect-square w-32 animate-sliding-right rounded-full bg-pink-600 lg:-right-32 lg:bottom-0 lg:w-64"
     >
     </div>
-    <span class="grid place-content-center"> </span>
-    <p class="leading-[120px] tracking-wide">Information System</p><p>
-      Development
-    </p>
+    <!-- blue -->
     <div
-      class="invisible absolute bottom-0 right-0 h-72 w-36 rounded-l-full bg-pink-600 sm:visible"
+      class="absolute -right-32 -top-24 aspect-square h-[240px] animate-sliding-right rounded-full ring-[32px] ring-indigo-800 lg:-right-80 lg:-top-1/4 lg:h-[600px] lg:ring-[64px]"
     >
     </div>
     <div
-      class="invisible absolute bottom-0 left-0 h-80 w-48 rounded-tr-full border-r-[35px] border-indigo-800 sm:visible md:w-60 lg:w-80"
+      class="absolute -bottom-12 -left-16 aspect-square w-48 animate-sliding-left rounded-full ring-[32px] ring-indigo-800 sm:visible lg:-bottom-16 lg:-left-24 lg:w-64"
     >
     </div>
     <div
-      class="invisible absolute bottom-0 right-1/4 h-36 w-72 rounded-t-full border-t-[22px] border-blue-700 sm:visible"
+      class="absolute -bottom-8 right-[10%] aspect-square w-24 animate-sliding-up rounded-full ring-[12px] ring-blue-700 lg:-bottom-32 lg:right-1/4 lg:w-48 lg:ring-[28px]"
     >
     </div>
+    <!-- text -->
+    <span class="grid place-content-center"> </span>
+    <p class="z-10 leading-[120px] tracking-wide">Information System</p><p
+      class="z-10"
+    >
+      Development
+    </p>
   </section>
   <section
-    class="absolute flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-black lg:-translate-y-32"
+    class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-black lg:-translate-y-32"
   >
     <Image src={ISDLogo} class="w-60 lg:w-80" alt="logo" />
     <div
@@ -50,4 +69,5 @@ import { Image } from "astro:assets";
       </p>
     </div>
   </section>
+  <Members members={orgMembers} />
 </Layout>

tailwind.config.mjs

@@ -17,10 +17,16 @@ export default {
           "70%": { transform: "translateX(-2%)" },
           "100%": { transform: "translateX(0)" },
         },
+        slideUp: {
+          "0%": { transform: "translateY(100%)" },
+          "70%": { transform: "translateY(-2%)" },
+          "100%": { transform: "translateY(0)" },
+        },
       },
       animation: {
         "sliding-left": "slideLeft 1.5s",
         "sliding-right": "slideRight 1.5s",
+        "sliding-up": "slideUp 1.5s",
       },
     },
   },