feat: members

isd-sgcu · Jan 29, 2024 · db5c7aa · db5c7aa
1 parent 40c619f
commit db5c7aa
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 23 deletions.
diff --git a/src/components/member/Members.svelte b/src/components/member/Members.svelte
@@ -5,22 +5,33 @@
 </script>
 
 <section>
-  <div class="container bg-blue-500">
-    <p class="text-4xl font-bold text-white">Members</p>
-    <div class="inline-flex items-center justify-center">
-      <div class="profile-container">
-        {#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
+    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>
diff --git a/src/components/member/ProfileCard.svelte b/src/components/member/ProfileCard.svelte
@@ -5,14 +5,19 @@
 </script>
 
 <div>
-  <div class="m-2 inline-block">
+  <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 hover:scale-110"
+        class="rounded bg-[#232428] p-2 text-white duration-200 hover:scale-110"
       >
         <div class="flex flex-row items-center">
-          <img alt={username} class="mr-3 rounded-full" src={avatarURL} />
+          <img
+            id="image-profile"
+            alt={username}
+            class="mr-2 h-8 w-8 rounded-full"
+            src={avatarURL}
+          />
           <p class="text-sm">
             @ {username}
           </p>
@@ -21,3 +26,10 @@
     </a>
   </div>
 </div>
+
+<style lang="post-css">
+  #image-profile {
+    width: 30px;
+    height: 30px;
+  }
+</style>
diff --git a/src/components/member/ProfileSection.svelte b/src/components/member/ProfileSection.svelte
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -16,8 +16,7 @@ const fetchOrgMembers = async () => {
     console.error(err);
   }
 };
-const orgMembers= await fetchOrgMembers();
-console.log(orgMembers);
+const orgMembers = await fetchOrgMembers();
 ---
 
 <Layout title="Home" description="Main page">
@@ -33,7 +32,9 @@ console.log(orgMembers);
     >
     </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
@@ -50,7 +51,7 @@ console.log(orgMembers);
     </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
@@ -63,7 +64,7 @@ console.log(orgMembers);
         อบจ. และองค์กรต่าง ๆ ในจุฬาฯ เพื่อพัฒนาระบบเว็บไซต์ แอปพลิเคชัน
         และระบบสารสนเทศอื่น ๆ ที่อำนวยความสะดวก และเป็นประโยชน์ต่อนิสิตจุฬาฯ
       </p>
-      <Members orgMembers={orgMembers}/>
     </div>
   </section>
+  <Members OrgMembers={orgMembers} />
 </Layout>