From 5ff868fabcf49428f39a803d847812ac63a3ede8 Mon Sep 17 00:00:00 2001
From: ChanatpakornD <csirintronsopon8@gmail.com>
Date: Mon, 29 Jan 2024 20:41:54 +0700
Subject: [PATCH] refactor: camel case

---
 src/components/member/Members.svelte   |  8 ++++---
 src/components/member/RightTick.svelte | 30 ++++++++++++++++++++++++++
 src/pages/index.astro                  | 13 +++++------
 3 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 src/components/member/RightTick.svelte

diff --git a/src/components/member/Members.svelte b/src/components/member/Members.svelte
index 6415d5f..2ebc26a 100644
--- a/src/components/member/Members.svelte
+++ b/src/components/member/Members.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import ProfileCard from "./ProfileCard.svelte";
+  import RightTick from "./RightTick.svelte";
   import type { OrgMember } from "./types.ts";
-  export let OrgMembers: OrgMember[];
+  export let members: OrgMember[];
 </script>
 
 <section>
@@ -12,10 +13,10 @@
       <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}
+          {#if !members || members.length === 0}
             <p>No Public Members found...</p>
           {:else}
-            {#each OrgMembers as member}
+            {#each members as member}
               <ProfileCard
                 username={member.login}
                 avatarURL={member.avatar_url}
@@ -31,6 +32,7 @@
         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>
diff --git a/src/components/member/RightTick.svelte b/src/components/member/RightTick.svelte
new file mode 100644
index 0000000..86f5b29
--- /dev/null
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f47f5c8..68943d8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,6 +17,7 @@ const fetchOrgMembers = async () => {
   }
 };
 const orgMembers = await fetchOrgMembers();
+console.log(orgMembers);
 ---
 
 <Layout title="Home" description="Main page">
@@ -25,24 +26,24 @@ const orgMembers = await fetchOrgMembers();
   >
     <!-- pink -->
     <div
-      class="absolute left-16 lg:left-32 top-16 lg:top-44 aspect-square w-24 animate-sliding-left rounded-full bg-pink-600 duration-100"
+      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="duration-50 absolute -right-16 bottom-16 lg:-right-32 lg:bottom-0 aspect-square w-32 lg:w-64 animate-sliding-right rounded-full bg-pink-600"
+      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>
     <!-- blue -->
     <div
-      class="absolute -right-32 lg:-right-80 -top-24 lg:-top-1/4 aspect-square h-[240px] lg:h-[600px] animate-sliding-right rounded-full ring-[32px] lg:ring-[64px] ring-indigo-800"
+      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="absolute -bottom-12 -left-16 lg:-bottom-16 lg:-left-24 aspect-square w-48 lg:w-64 animate-sliding-left rounded-full ring-[32px] ring-indigo-800 sm:visible"
+      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="absolute -bottom-8 lg:-bottom-32 right-[10%] lg:right-1/4 aspect-square w-24 lg:w-48 animate-sliding-up rounded-full ring-[12px] lg:ring-[28px] ring-blue-700"
+      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 -->
@@ -69,5 +70,5 @@ const orgMembers = await fetchOrgMembers();
       </p>
     </div>
   </section>
-  <Members OrgMembers={orgMembers} />
+  <Members members={orgMembers} />
 </Layout>