Chanatpakorn/web 14 home members

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,37 @@
+<script lang="ts">
+  import ProfileCard from "./ProfileCard.svelte";
+  import type { OrgMember } from "./types.ts";
+  export let OrgMembers: 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 !OrgMembers || OrgMembers.length === 0}
+            <p>No Public Members found...</p>
+          {:else}
+            {#each OrgMembers 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
+      </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/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,6 +3,20 @@ 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">
@@ -18,7 +32,9 @@ import { Image } from "astro:assets";
     >
     </div>
     <span class="grid place-content-center"> </span>
-    <p class="leading-[120px] tracking-wide">Information System</p><p>
+    <p class="z-10 leading-[120px] tracking-wide">Information System</p><p
+      class="z-10"
+    >
       Development
     </p>
     <div
@@ -35,7 +51,7 @@ import { Image } from "astro:assets";
     </div>
   </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 +66,5 @@ import { Image } from "astro:assets";
       </p>
     </div>
   </section>
+  <Members OrgMembers={orgMembers} />
 </Layout>