From a2f033b933a2e1166d0fecf19ccfb2ce55417e79 Mon Sep 17 00:00:00 2001
From: Chulinuwu <ananzxzoxd@gmail.com>
Date: Fri, 13 Sep 2024 17:02:09 +0700
Subject: [PATCH 1/7] feat:List/Reponsive Dont Sure variant or color?

---
 src/lib/components/List/List.svelte  | 31 ++++++++++++++++++++++++++++
 src/lib/components/Playground.svelte | 27 ++++++++++++++++++++++++
 src/styles/tailwind/list.ts          |  7 +++++++
 3 files changed, 65 insertions(+)
 create mode 100644 src/lib/components/List/List.svelte
 create mode 100644 src/styles/tailwind/list.ts

diff --git a/src/lib/components/List/List.svelte b/src/lib/components/List/List.svelte
new file mode 100644
index 0000000..a18dfe2
--- /dev/null
+++ b/src/lib/components/List/List.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { type Variant , listVariants} from '../../../styles/tailwind/list';
+	import { typography } from '../../../styles/tailwind/typography';
+
+	export let title: string;
+    export let createdAt: string;
+	export let createdBy: string;
+    export let linkHref: string;
+    export let variant: Variant;
+
+    function formatDate(dateString: string): string {
+        const date = new Date(dateString);
+        const options: Intl.DateTimeFormatOptions = {
+            day: '2-digit',
+            month: 'long',
+            year: 'numeric',
+            calendar: 'buddhist'
+        };
+        return new Intl.DateTimeFormat('th-TH', options).format(date);
+    }
+
+</script>
+
+<a href={linkHref}  target="_blank"   class={`h-auto w-[761px] flex flex-col py-[12px] px-[24px] max-md:w-[390px] rounded ${listVariants[variant]}`}>
+    <div class={`${typography({ variant : 'body-large' })} text-ellipsis whitespace-nowrap overflow-hidden`}>{title}</div>
+
+    <div class={typography({ variant : 'body-normal' })}>{formatDate(createdAt)} โดย {createdBy}</div>
+
+</a>
+
+
diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index 2e3b403..f9a36c7 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -5,6 +5,7 @@
 	import Modal from '$lib/components/Modal/Modal.svelte';
 	import Footer from '$lib/components/Footer/Footer.svelte';
 	import { modalShow } from './Modal/store';
+	import List from './List/List.svelte';
 
 	modalShow.set(false);
 
@@ -160,6 +161,32 @@
 		{/if}
 	</section>
 
+	<section class="section mb-5 gap-y-5 flex flex-col">
+		<h2 class="font-bold text-2xl mb-4">List</h2>
+		
+		<List
+		variant="pink"
+			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+			createdAt="2022-01-01"
+			createdBy="Admin"
+			linkHref="https://google.com"
+			/>
+			<List
+			variant="grey"
+				title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+				createdAt="2022-01-01"
+				createdBy="Admin"
+				linkHref="https://google.com"
+				/>
+				<List
+				variant="base"
+					title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+					createdAt="2022-01-01"
+					createdBy="Admin"
+					linkHref="https://google.com"
+					/>
+	</section>
+
 	<Footer />
 </div>
 
diff --git a/src/styles/tailwind/list.ts b/src/styles/tailwind/list.ts
new file mode 100644
index 0000000..d0c5d6b
--- /dev/null
+++ b/src/styles/tailwind/list.ts
@@ -0,0 +1,7 @@
+export type Variant = 'pink' | 'grey'  | 'base';
+
+export const listVariants: Record<Variant, string> = {
+    pink: 'bg-[#FFEBE7]',
+    grey: 'bg-[#F7F7F7]',
+    base: 'bg-white',
+};
\ No newline at end of file

From 5c2de3990215bf48ad4a6355beccddbb2edc01c4 Mon Sep 17 00:00:00 2001
From: Chulinuwu <ananzxzoxd@gmail.com>
Date: Fri, 13 Sep 2024 17:25:01 +0700
Subject: [PATCH 2/7] fix:lint

---
 src/lib/components/List/List.svelte  | 50 +++++++++++++++-------------
 src/lib/components/Playground.svelte | 32 +++++++++---------
 src/styles/tailwind/list.ts          | 10 +++---
 3 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/List/List.svelte b/src/lib/components/List/List.svelte
index a18dfe2..4c89ab1 100644
--- a/src/lib/components/List/List.svelte
+++ b/src/lib/components/List/List.svelte
@@ -1,31 +1,35 @@
 <script lang="ts">
-    import { type Variant , listVariants} from '../../../styles/tailwind/list';
+	import { type Variant, listVariants } from '../../../styles/tailwind/list';
 	import { typography } from '../../../styles/tailwind/typography';
 
 	export let title: string;
-    export let createdAt: string;
+	export let createdAt: string;
 	export let createdBy: string;
-    export let linkHref: string;
-    export let variant: Variant;
-
-    function formatDate(dateString: string): string {
-        const date = new Date(dateString);
-        const options: Intl.DateTimeFormatOptions = {
-            day: '2-digit',
-            month: 'long',
-            year: 'numeric',
-            calendar: 'buddhist'
-        };
-        return new Intl.DateTimeFormat('th-TH', options).format(date);
-    }
-
+	export let linkHref: string;
+	export let variant: Variant;
+
+	function formatDate(dateString: string): string {
+		const date = new Date(dateString);
+		const options: Intl.DateTimeFormatOptions = {
+			day: '2-digit',
+			month: 'long',
+			year: 'numeric',
+			calendar: 'buddhist'
+		};
+		return new Intl.DateTimeFormat('th-TH', options).format(date);
+	}
 </script>
 
-<a href={linkHref}  target="_blank"   class={`h-auto w-[761px] flex flex-col py-[12px] px-[24px] max-md:w-[390px] rounded ${listVariants[variant]}`}>
-    <div class={`${typography({ variant : 'body-large' })} text-ellipsis whitespace-nowrap overflow-hidden`}>{title}</div>
-
-    <div class={typography({ variant : 'body-normal' })}>{formatDate(createdAt)} โดย {createdBy}</div>
-
+<a
+	href={linkHref}
+	target="_blank"
+	class={`h-auto w-[761px] flex flex-col py-[12px] px-[24px] max-md:w-[390px] rounded ${listVariants[variant]}`}
+>
+	<div
+		class={`${typography({ variant: 'body-large' })} text-ellipsis whitespace-nowrap overflow-hidden`}
+	>
+		{title}
+	</div>
+
+	<div class={typography({ variant: 'body-normal' })}>{formatDate(createdAt)} โดย {createdBy}</div>
 </a>
-
-
diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index f9a36c7..c20f6ac 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -163,28 +163,28 @@
 
 	<section class="section mb-5 gap-y-5 flex flex-col">
 		<h2 class="font-bold text-2xl mb-4">List</h2>
-		
+
 		<List
-		variant="pink"
+			variant="pink"
 			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
 			createdAt="2022-01-01"
 			createdBy="Admin"
 			linkHref="https://google.com"
-			/>
-			<List
+		/>
+		<List
 			variant="grey"
-				title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
-				createdAt="2022-01-01"
-				createdBy="Admin"
-				linkHref="https://google.com"
-				/>
-				<List
-				variant="base"
-					title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
-					createdAt="2022-01-01"
-					createdBy="Admin"
-					linkHref="https://google.com"
-					/>
+			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+			createdAt="2022-01-01"
+			createdBy="Admin"
+			linkHref="https://google.com"
+		/>
+		<List
+			variant="base"
+			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
+			createdAt="2022-01-01"
+			createdBy="Admin"
+			linkHref="https://google.com"
+		/>
 	</section>
 
 	<Footer />
diff --git a/src/styles/tailwind/list.ts b/src/styles/tailwind/list.ts
index d0c5d6b..2a5f82f 100644
--- a/src/styles/tailwind/list.ts
+++ b/src/styles/tailwind/list.ts
@@ -1,7 +1,7 @@
-export type Variant = 'pink' | 'grey'  | 'base';
+export type Variant = 'pink' | 'grey' | 'base';
 
 export const listVariants: Record<Variant, string> = {
-    pink: 'bg-[#FFEBE7]',
-    grey: 'bg-[#F7F7F7]',
-    base: 'bg-white',
-};
\ No newline at end of file
+	pink: 'bg-[#FFEBE7]',
+	grey: 'bg-[#F7F7F7]',
+	base: 'bg-white'
+};

From 276f4befe5d1ea7ae21a81f262e21e4ca6c8f0f9 Mon Sep 17 00:00:00 2001
From: Chulinuwu <ananzxzoxd@gmail.com>
Date: Fri, 13 Sep 2024 17:33:57 +0700
Subject: [PATCH 3/7] fix:footer text size mobile / list text size mobile

---
 src/lib/components/Footer/Footer.svelte | 2 +-
 src/lib/components/List/List.svelte     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Footer/Footer.svelte b/src/lib/components/Footer/Footer.svelte
index f8a553b..9a8771c 100644
--- a/src/lib/components/Footer/Footer.svelte
+++ b/src/lib/components/Footer/Footer.svelte
@@ -139,7 +139,7 @@
 	</div>
 
 	<div class="h-[2px] bg-gray-300 w-full my-5"></div>
-	<div class={`max-md:text-center w-full max-md:${typography({ variant: 'body-small' })}`}>
+	<div class={`max-md:text-center w-full max-md:text-xs`}>
 		© 2024 SGCU. All rights reserved Develop by ISD
 	</div>
 </div>
diff --git a/src/lib/components/List/List.svelte b/src/lib/components/List/List.svelte
index 4c89ab1..3d301e1 100644
--- a/src/lib/components/List/List.svelte
+++ b/src/lib/components/List/List.svelte
@@ -26,10 +26,10 @@
 	class={`h-auto w-[761px] flex flex-col py-[12px] px-[24px] max-md:w-[390px] rounded ${listVariants[variant]}`}
 >
 	<div
-		class={`${typography({ variant: 'body-large' })} text-ellipsis whitespace-nowrap overflow-hidden`}
+    class={`text-ellipsis whitespace-nowrap overflow-hidden ${typography({ variant: 'body-large' })} max-md:${typography({ variant: 'body-normal' })}`}
 	>
 		{title}
 	</div>
 
-	<div class={typography({ variant: 'body-normal' })}>{formatDate(createdAt)} โดย {createdBy}</div>
+    <div class={`max-md:${typography({ variant: 'body-small' })} ${typography({ variant: 'body-normal' })}`}>{formatDate(createdAt)} โดย {createdBy}</div>
 </a>

From 5d20fd7cd0bc18a82af6704abb73250296b46606 Mon Sep 17 00:00:00 2001
From: Chulinuwu <ananzxzoxd@gmail.com>
Date: Fri, 13 Sep 2024 17:40:30 +0700
Subject: [PATCH 4/7] fix:lint

---
 src/lib/components/List/List.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/List/List.svelte b/src/lib/components/List/List.svelte
index 3d301e1..175d3a3 100644
--- a/src/lib/components/List/List.svelte
+++ b/src/lib/components/List/List.svelte
@@ -26,10 +26,14 @@
 	class={`h-auto w-[761px] flex flex-col py-[12px] px-[24px] max-md:w-[390px] rounded ${listVariants[variant]}`}
 >
 	<div
-    class={`text-ellipsis whitespace-nowrap overflow-hidden ${typography({ variant: 'body-large' })} max-md:${typography({ variant: 'body-normal' })}`}
+		class={`text-ellipsis whitespace-nowrap overflow-hidden ${typography({ variant: 'body-large' })} max-md:${typography({ variant: 'body-normal' })}`}
 	>
 		{title}
 	</div>
 
-    <div class={`max-md:${typography({ variant: 'body-small' })} ${typography({ variant: 'body-normal' })}`}>{formatDate(createdAt)} โดย {createdBy}</div>
+	<div
+		class={`max-md:${typography({ variant: 'body-small' })} ${typography({ variant: 'body-normal' })}`}
+	>
+		{formatDate(createdAt)} โดย {createdBy}
+	</div>
 </a>

From 16f2e5203e1c730899fc68cdfa3e35e73249ac8e Mon Sep 17 00:00:00 2001
From: Chulinuwu <ananzxzoxd@gmail.com>
Date: Sat, 14 Sep 2024 00:39:07 +0700
Subject: [PATCH 5/7] fix:variant/deleteFooter/dayjs

---
 package.json                            |   1 +
 pnpm-lock.yaml                          |   8 ++
 src/lib/components/Footer/Footer.svelte | 145 ------------------------
 src/lib/components/Footer/suculogo.png  | Bin 1904 -> 0 bytes
 src/lib/components/List/List.svelte     |  28 +++--
 src/lib/components/Playground.svelte    |   5 +-
 src/styles/tailwind/list.ts             |  22 +++-
 7 files changed, 44 insertions(+), 165 deletions(-)
 delete mode 100644 src/lib/components/Footer/Footer.svelte
 delete mode 100644 src/lib/components/Footer/suculogo.png

diff --git a/package.json b/package.json
index 971a9ec..9c70efb 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"@fortawesome/free-brands-svg-icons": "^6.6.0",
 		"@fortawesome/free-solid-svg-icons": "^6.6.0",
 		"clsx": "^2.1.1",
+		"dayjs": "^1.11.13",
 		"svelte-fa": "^4.0.2",
 		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3212f56..7357dc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       svelte-fa:
         specifier: ^4.0.2
         version: 4.0.2(svelte@4.2.19)
@@ -674,6 +677,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@4.3.6:
     resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
     engines: {node: '>=6.0'}
@@ -2220,6 +2226,8 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  dayjs@1.11.13: {}
+
   debug@4.3.6:
     dependencies:
       ms: 2.1.2
diff --git a/src/lib/components/Footer/Footer.svelte b/src/lib/components/Footer/Footer.svelte
deleted file mode 100644
index 9a8771c..0000000
--- a/src/lib/components/Footer/Footer.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script lang="ts">
-	import { typography } from '../../../styles/tailwind/typography';
-	import sucuImg from '$lib/components/Footer/suculogo.png';
-</script>
-
-<div class="h-auto w-full py-[64px] px-[135px] max-md:p-[70px] gap-6 bg-sucu-pink-05">
-	<div class="flex justify-between w-full h-full max-md:hidden">
-		<div class="h-auto w-auto gap-6 flex">
-			<div class="flex flex-col gap-3">
-				<!-- sccu icon big -->
-				<svg
-					width="55"
-					height="55"
-					viewBox="0 0 55 55"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						d="M49.4088 22.3612C47.6034 20.5561 45.4984 19.1554 43.2085 18.2079C40.919 17.2579 38.4399 16.7614 35.8868 16.7614C31.2285 16.7614 26.8259 18.4129 23.3482 21.4445L21.0254 19.122L33.5973 6.55233L32.6471 5.6023C29.0337 1.98953 24.2317 0 19.1253 0C14.0161 0.00256667 9.21446 1.98953 5.6007 5.6023C1.98988 9.21287 0 14.0136 0 19.122C0 24.2304 1.98988 29.0312 5.6007 32.6418C9.2141 36.252 14.0161 38.2415 19.1253 38.2415C23.781 38.2415 28.1836 36.5875 31.6613 33.5584L33.9842 35.8809L27.5073 42.3592L25.6044 44.2592L21.4119 48.4506L22.3647 49.4006C25.9755 53.0134 30.7775 55.0004 35.8868 55.0004C40.5424 55.0004 44.9476 53.3489 48.4253 50.3173C48.7608 50.0254 49.0912 49.7182 49.4088 49.4006C49.729 49.0805 50.0337 48.7527 50.3257 48.4172C56.8509 40.9149 56.5436 29.495 49.4088 22.3615V22.3612ZM17.2224 19.122L21.4119 23.3112L25.5428 27.4413C21.4247 30.6214 15.4679 30.3244 11.6932 26.5503C7.59828 22.4536 7.59828 15.7883 11.6932 11.6941C13.7421 9.64553 16.4335 8.62143 19.1224 8.62143C21.3914 8.62143 23.6578 9.34853 25.5428 10.8031L17.2224 19.1224V19.122ZM19.1253 35.5527C14.7334 35.5527 10.6077 33.8448 7.50367 30.7388C4.39966 27.6353 2.68923 23.5103 2.68923 19.1217C2.68923 14.733 4.40003 10.6055 7.50367 7.502C10.6077 4.39853 14.7334 2.69097 19.1253 2.6884C23.064 2.6884 26.7904 4.06597 29.7558 6.59047L27.456 8.88983C22.2778 4.66767 14.6179 4.96723 9.7928 9.7911C4.64794 14.9351 4.64794 23.3057 9.7928 28.4497C12.3639 31.0229 15.7445 32.3085 19.1224 32.3085C22.0805 32.3085 25.0381 31.3251 27.4534 29.3535H27.456L29.7558 31.6529C26.79 34.1777 23.064 35.5527 19.1253 35.5527ZM33.5973 31.6917L29.469 27.5616C33.587 24.3815 39.5412 24.6785 43.316 28.4526C45.3007 30.437 46.3943 33.0744 46.3943 35.8805C46.3943 38.2338 45.626 40.469 44.2071 42.2998L35.8864 33.9805L33.5969 31.6914L33.5973 31.6917ZM35.8868 37.7832L42.3045 44.1998C42.1868 44.2919 42.0662 44.3791 41.9459 44.4635C41.8538 44.5276 41.7614 44.5914 41.6694 44.653C41.6642 44.6556 41.6617 44.6582 41.6565 44.6607C41.5872 44.7069 41.5183 44.7502 41.449 44.7938C41.3745 44.84 41.3004 44.8859 41.2263 44.9295C41.1519 44.9757 41.0753 45.0164 41.0008 45.0575C40.9264 45.1011 40.8497 45.1418 40.7753 45.1803C40.6678 45.2368 40.5604 45.2903 40.4525 45.3416C40.3143 45.408 40.176 45.4722 40.0352 45.5312C39.9047 45.5877 39.7741 45.6412 39.6435 45.69C39.5001 45.7464 39.3542 45.7974 39.2108 45.8462C39.1008 45.8821 38.9908 45.9155 38.8804 45.9485C38.8393 45.9613 38.8008 45.9716 38.7627 45.9818C38.6475 46.0152 38.5323 46.046 38.4168 46.0739C38.4091 46.0764 38.3989 46.079 38.3886 46.0816C38.2786 46.1072 38.1682 46.1329 38.0556 46.156C38.0017 46.1688 37.9481 46.1791 37.8942 46.1894C37.7971 46.2073 37.6969 46.2253 37.5972 46.2433C37.5818 46.2458 37.5638 46.2484 37.5484 46.251C37.4179 46.2715 37.2899 46.2895 37.1593 46.3049C37.057 46.3177 36.9543 46.328 36.852 46.3357C36.7827 46.3434 36.7137 46.3511 36.6419 46.3536C36.5597 46.3613 36.4754 46.3665 36.391 46.369C36.3371 46.3716 36.2836 46.3742 36.2296 46.3767C36.1145 46.3793 36.0019 46.3819 35.8864 46.3819C35.7709 46.3819 35.6583 46.3793 35.5431 46.3767C35.4892 46.3742 35.4357 46.3716 35.3818 46.369C35.2971 46.3665 35.2127 46.3613 35.1309 46.3536C35.059 46.3511 34.9901 46.3434 34.9208 46.3357C34.8185 46.328 34.7158 46.3177 34.6135 46.3049C34.4829 46.2895 34.3549 46.2715 34.2244 46.251C34.0964 46.2304 33.971 46.2073 33.843 46.1817C33.7942 46.1714 33.7432 46.1637 33.6944 46.1509C33.4766 46.1047 33.2617 46.0537 33.0464 45.9921C32.9951 45.9793 32.9441 45.9639 32.8928 45.9485C32.6265 45.8689 32.3599 45.7794 32.0962 45.6771C31.9939 45.6386 31.8912 45.5979 31.7889 45.5543C31.5227 45.4417 31.2586 45.3163 30.9975 45.1803C30.9234 45.1418 30.8464 45.1007 30.7723 45.0575C30.6953 45.0164 30.6212 44.9753 30.5468 44.9295C30.4723 44.8859 30.3983 44.84 30.3242 44.7938C30.2549 44.7502 30.1859 44.7069 30.1166 44.6607C30.1115 44.6582 30.1089 44.6556 30.1038 44.653C30.0117 44.5914 29.9193 44.5276 29.8273 44.4635C29.707 44.3788 29.5867 44.2919 29.4686 44.1998L35.8864 37.7832H35.8868ZM35.8868 52.3116C31.9481 52.3116 28.2192 50.9366 25.2538 48.4121L27.5535 46.1127C27.7817 46.2972 28.012 46.4739 28.2474 46.6404C28.327 46.6968 28.4036 46.7504 28.4828 46.8043C28.565 46.8607 28.6442 46.9117 28.7238 46.963C28.8059 47.0169 28.8851 47.0679 28.9669 47.1167C29.2922 47.3165 29.6226 47.5031 29.9604 47.6696C30.0271 47.703 30.091 47.7363 30.1577 47.7668C30.2729 47.8232 30.3909 47.8768 30.5087 47.9281C30.5754 47.9589 30.6418 47.9871 30.7085 48.015C30.7778 48.0458 30.8493 48.0766 30.9187 48.1019C31.0004 48.1353 31.0826 48.1686 31.1644 48.1991C31.1952 48.2119 31.2234 48.2222 31.2539 48.2324C31.428 48.2992 31.6048 48.3604 31.7841 48.4169C32.1681 48.5448 32.5576 48.6501 32.9492 48.7395C33.0109 48.7524 33.0695 48.7652 33.1311 48.778C33.5973 48.8778 34.0685 48.9522 34.5398 48.998C34.6168 49.0057 34.6934 49.0134 34.7675 49.0211C34.9571 49.0365 35.1441 49.0494 35.3308 49.0545C35.4254 49.0596 35.5178 49.0622 35.6099 49.0648C35.7943 49.0699 35.9788 49.0699 36.1629 49.0648C36.255 49.0622 36.3474 49.0596 36.442 49.0545C36.629 49.0494 36.816 49.0365 37.0053 49.0211C37.0794 49.0134 37.1538 49.0057 37.2305 49.0006C37.753 48.9467 38.2727 48.8624 38.7876 48.7472C38.8668 48.7293 38.949 48.7113 39.0282 48.6908C39.5632 48.5602 40.091 48.3963 40.6084 48.1991C40.6906 48.1683 40.7723 48.1349 40.8541 48.1019C40.9234 48.0762 40.9949 48.0454 41.0643 48.015C41.131 47.9868 41.1974 47.9585 41.2641 47.9281C42.1094 47.5541 42.9236 47.0855 43.6893 46.5223C43.7663 46.4658 43.8404 46.4097 43.9148 46.3533C44.0172 46.2763 44.1173 46.1971 44.217 46.1153H44.2196L44.2684 46.1615L46.5194 48.4121C43.551 50.937 39.8251 52.3116 35.8864 52.3116H35.8868ZM48.4201 46.5095L46.1691 44.2614V44.2589L46.1204 44.2127V44.2101C48.0409 41.862 49.0835 38.9506 49.0835 35.8805C49.0835 32.3572 47.7109 29.044 45.2189 26.55C40.3942 21.7283 32.7318 21.4291 27.5535 25.6487L25.2538 23.3493C28.2195 20.8248 31.9481 19.4498 35.8868 19.4498C40.2761 19.4498 44.4044 21.1578 47.5084 24.2612C53.5958 30.3501 53.9005 40.0624 48.4201 46.5095Z"
-						fill="#FF82A9"
-					/>
-				</svg>
-				<div class={typography({ variant: 'heading4' })}>สภานิสิตจุฬาลงกรณ์มหาวิทยาลัย</div>
-
-				<div class="flex gap-3">
-					<!-- facebook icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M13 1C6.384 1 1 6.384 1 13C1 19.616 6.384 25 13 25C19.616 25 25 19.616 25 13C25 6.384 19.616 1 13 1ZM13 3C18.535 3 23 7.465 23 13C23.0018 15.3938 22.1432 17.7085 20.5806 19.522C19.0181 21.3355 16.8558 22.5269 14.488 22.879V15.916H17.336L17.783 13.023H14.488V11.443C14.488 10.243 14.883 9.176 16.006 9.176H17.811V6.652C17.494 6.609 16.823 6.516 15.555 6.516C12.907 6.516 11.355 7.914 11.355 11.1V13.023H8.633V15.916H11.355V22.854C9.01975 22.4696 6.89724 21.2675 5.36669 19.4623C3.83615 17.6572 2.99729 15.3667 3 13C3 7.465 7.465 3 13 3Z"
-							fill="#3F3A3A"
-						/>
-					</svg>
-					<div class={typography({ variant: 'body-normal' })}>สภานิสิตจุฬาลงกรณ์มหาวิทยาลัย</div>
-				</div>
-
-				<div class="flex gap-3">
-					<!-- instragram icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M19.6 6.23594H19.612M7 0.835938H19C22.3137 0.835938 25 3.52223 25 6.83594V18.8359C25 22.1496 22.3137 24.8359 19 24.8359H7C3.68629 24.8359 1 22.1496 1 18.8359V6.83594C1 3.52223 3.68629 0.835938 7 0.835938ZM17.8 12.0799C17.9481 13.0786 17.7775 14.0986 17.3125 14.9948C16.8475 15.8909 16.1118 16.6176 15.21 17.0715C14.3081 17.5255 13.2861 17.6835 12.2893 17.5231C11.2926 17.3627 10.3717 16.892 9.65781 16.1781C8.9439 15.4642 8.47328 14.5434 8.31288 13.5466C8.15248 12.5498 8.31048 11.5278 8.76439 10.626C9.21831 9.72416 9.94502 8.98843 10.8412 8.52343C11.7373 8.05843 12.7573 7.88784 13.756 8.03594C14.7747 8.187 15.7178 8.66169 16.446 9.38991C17.1742 10.1181 17.6489 11.0612 17.8 12.0799Z"
-							stroke="#3F3A3A"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
-
-					<div class={typography({ variant: 'body-normal' })}>sapanisitchula</div>
-				</div>
-			</div>
-			<div class="flex flex-col gap-3">
-				<!-- sucu icon big -->
-				<img src={sucuImg} class="w-[34px] h-[55px]" alt="sucuicon" />
-
-				<div class={typography({ variant: 'heading4' })}>สภานิสิตจุฬาลงกรณ์มหาวิทยาลัย</div>
-
-				<div class="flex gap-3">
-					<!-- facebook icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M13 1C6.384 1 1 6.384 1 13C1 19.616 6.384 25 13 25C19.616 25 25 19.616 25 13C25 6.384 19.616 1 13 1ZM13 3C18.535 3 23 7.465 23 13C23.0018 15.3938 22.1432 17.7085 20.5806 19.522C19.0181 21.3355 16.8558 22.5269 14.488 22.879V15.916H17.336L17.783 13.023H14.488V11.443C14.488 10.243 14.883 9.176 16.006 9.176H17.811V6.652C17.494 6.609 16.823 6.516 15.555 6.516C12.907 6.516 11.355 7.914 11.355 11.1V13.023H8.633V15.916H11.355V22.854C9.01975 22.4696 6.89724 21.2675 5.36669 19.4623C3.83615 17.6572 2.99729 15.3667 3 13C3 7.465 7.465 3 13 3Z"
-							fill="#3F3A3A"
-						/>
-					</svg>
-					<div class={typography({ variant: 'body-normal' })}>
-						องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย (อบจ.)
-					</div>
-				</div>
-
-				<div class="flex gap-3">
-					<!-- instragram icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M19.6 6.23594H19.612M7 0.835938H19C22.3137 0.835938 25 3.52223 25 6.83594V18.8359C25 22.1496 22.3137 24.8359 19 24.8359H7C3.68629 24.8359 1 22.1496 1 18.8359V6.83594C1 3.52223 3.68629 0.835938 7 0.835938ZM17.8 12.0799C17.9481 13.0786 17.7775 14.0986 17.3125 14.9948C16.8475 15.8909 16.1118 16.6176 15.21 17.0715C14.3081 17.5255 13.2861 17.6835 12.2893 17.5231C11.2926 17.3627 10.3717 16.892 9.65781 16.1781C8.9439 15.4642 8.47328 14.5434 8.31288 13.5466C8.15248 12.5498 8.31048 11.5278 8.76439 10.626C9.21831 9.72416 9.94502 8.98843 10.8412 8.52343C11.7373 8.05843 12.7573 7.88784 13.756 8.03594C14.7747 8.187 15.7178 8.66169 16.446 9.38991C17.1742 10.1181 17.6489 11.0612 17.8 12.0799Z"
-							stroke="#3F3A3A"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
-
-					<div class={typography({ variant: 'body-normal' })}>sgcu.chula</div>
-				</div>
-			</div>
-		</div>
-
-		<div class="w-[233px] h-full gap-3 mt-[79px] justify-end ml-6 max-md:ml-0">
-			<div class={typography({ variant: 'body-normal' })}>ประกาศ</div>
-			<div class={typography({ variant: 'body-normal' })}>เอกสาร</div>
-			<div class={typography({ variant: 'body-normal' })}>งบประมาณและสถิติ</div>
-			<div class={typography({ variant: 'body-normal' })}>สโมสรนิสิตฯ</div>
-		</div>
-	</div>
-
-	<div class="flex flex-col md:hidden">
-		<div class={`max-md:text-center w-full ${typography({ variant: 'body-normal' })}`}>ประกาศ</div>
-		<div class="h-[2px] bg-gray-300 w-full my-5"></div>
-		<div class={`max-md:text-center w-full ${typography({ variant: 'body-normal' })}`}>เอกสาร</div>
-		<div class="h-[2px] bg-gray-300 w-full my-5"></div>
-		<div class={`max-md:text-center w-full ${typography({ variant: 'body-normal' })}`}>
-			งบประมาณและสถิติ
-		</div>
-		<div class="h-[2px] bg-gray-300 w-full my-5"></div>
-		<div class={`max-md:text-center w-full ${typography({ variant: 'body-normal' })}`}>
-			สโมสรนิสิตฯ
-		</div>
-		<div class="h-[2px] bg-gray-300 w-full my-5"></div>
-		<div class={`max-md:text-center w-full ${typography({ variant: 'body-normal' })}`}>
-			สภานิสิตจุฬาลงกรณ์มหาวิทยาลัย
-		</div>
-		<div class="h-[2px] bg-gray-300 w-full my-5"></div>
-		<div class={`max-md:text-center w-full ${typography({ variant: 'body-normal' })}`}>
-			องค์การบริหารสโมสรนิสิตจุฬาฯ (อบจ.)
-		</div>
-	</div>
-
-	<div class="h-[2px] bg-gray-300 w-full my-5"></div>
-	<div class={`max-md:text-center w-full max-md:text-xs`}>
-		© 2024 SGCU. All rights reserved Develop by ISD
-	</div>
-</div>
diff --git a/src/lib/components/Footer/suculogo.png b/src/lib/components/Footer/suculogo.png
deleted file mode 100644
index d576c97d518ce86c5bde991e5f0dd4993def7b01..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1904
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

diff --git a/src/lib/components/List/List.svelte b/src/lib/components/List/List.svelte
index 175d3a3..b735ac6 100644
--- a/src/lib/components/List/List.svelte
+++ b/src/lib/components/List/List.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { type Variant, listVariants } from '../../../styles/tailwind/list';
 	import { typography } from '../../../styles/tailwind/typography';
+	import { cn } from '../../utils/cn';
+	import dayjs from 'dayjs';
+	import buddhistEra from 'dayjs/plugin/buddhistEra';
+	import 'dayjs/locale/th';
+
+	dayjs.extend(buddhistEra);
 
 	export let title: string;
 	export let createdAt: string;
@@ -9,30 +15,30 @@
 	export let variant: Variant;
 
 	function formatDate(dateString: string): string {
-		const date = new Date(dateString);
-		const options: Intl.DateTimeFormatOptions = {
-			day: '2-digit',
-			month: 'long',
-			year: 'numeric',
-			calendar: 'buddhist'
-		};
-		return new Intl.DateTimeFormat('th-TH', options).format(date);
+		return dayjs(dateString).locale('th').format('DD MMMM BBBB');
 	}
 </script>
 
 <a
 	href={linkHref}
 	target="_blank"
-	class={`h-auto w-[761px] flex flex-col py-[12px] px-[24px] max-md:w-[390px] rounded ${listVariants[variant]}`}
+	class={`h-auto w-[761px] flex flex-col py-3 px-4 max-md:w-[390px] rounded ${listVariants({ variant })}`}
 >
 	<div
-		class={`text-ellipsis whitespace-nowrap overflow-hidden ${typography({ variant: 'body-large' })} max-md:${typography({ variant: 'body-normal' })}`}
+		class={cn(
+			'text-ellipsis whitespace-nowrap overflow-hidden',
+			typography({ variant: 'body-large' }),
+			`max-md:${typography({ variant: 'body-normal' })}`
+		)}
 	>
 		{title}
 	</div>
 
 	<div
-		class={`max-md:${typography({ variant: 'body-small' })} ${typography({ variant: 'body-normal' })}`}
+		class={cn(
+			`max-md:${typography({ variant: 'body-small' })}`,
+			typography({ variant: 'body-normal' })
+		)}
 	>
 		{formatDate(createdAt)} โดย {createdBy}
 	</div>
diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index c20f6ac..a8b7bdf 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -3,7 +3,6 @@
 	import Button from './Button.svelte';
 	import TabCapsuleItem from './TabCapsule.svelte';
 	import Modal from '$lib/components/Modal/Modal.svelte';
-	import Footer from '$lib/components/Footer/Footer.svelte';
 	import { modalShow } from './Modal/store';
 	import List from './List/List.svelte';
 
@@ -179,7 +178,7 @@
 			linkHref="https://google.com"
 		/>
 		<List
-			variant="base"
+			variant="default"
 			title="Title Longgggggggggggggggggggggggggggggggggggggggggggggggggggg"
 			createdAt="2022-01-01"
 			createdBy="Admin"
@@ -187,7 +186,7 @@
 		/>
 	</section>
 
-	<Footer />
+
 </div>
 
 <style>
diff --git a/src/styles/tailwind/list.ts b/src/styles/tailwind/list.ts
index 2a5f82f..7ab322e 100644
--- a/src/styles/tailwind/list.ts
+++ b/src/styles/tailwind/list.ts
@@ -1,7 +1,17 @@
-export type Variant = 'pink' | 'grey' | 'base';
+import { tv, type VariantProps } from 'tailwind-variants';
 
-export const listVariants: Record<Variant, string> = {
-	pink: 'bg-[#FFEBE7]',
-	grey: 'bg-[#F7F7F7]',
-	base: 'bg-white'
-};
+export const listVariants = tv({
+	base: 'rounded-lg p-4',
+	variants: {
+		variant: {
+			pink: 'bg-[#FFEBE7]',
+			grey: 'bg-[#F7F7F7]', 
+			default: 'bg-white'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof listVariants>['variant'];
\ No newline at end of file

From 4e4afb55341bdb206819dcf393603109c31a9a6c Mon Sep 17 00:00:00 2001
From: Chulinuwu <ananzxzoxd@gmail.com>
Date: Sat, 14 Sep 2024 00:41:31 +0700
Subject: [PATCH 6/7] fix:lint

---
 src/lib/components/Playground.svelte | 2 --
 src/styles/tailwind/list.ts          | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index a8b7bdf..a1d7a39 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -185,8 +185,6 @@
 			linkHref="https://google.com"
 		/>
 	</section>
-
-
 </div>
 
 <style>
diff --git a/src/styles/tailwind/list.ts b/src/styles/tailwind/list.ts
index 7ab322e..ed3bba9 100644
--- a/src/styles/tailwind/list.ts
+++ b/src/styles/tailwind/list.ts
@@ -5,7 +5,7 @@ export const listVariants = tv({
 	variants: {
 		variant: {
 			pink: 'bg-[#FFEBE7]',
-			grey: 'bg-[#F7F7F7]', 
+			grey: 'bg-[#F7F7F7]',
 			default: 'bg-white'
 		}
 	},
@@ -14,4 +14,4 @@ export const listVariants = tv({
 	}
 });
 
-export type Variant = VariantProps<typeof listVariants>['variant'];
\ No newline at end of file
+export type Variant = VariantProps<typeof listVariants>['variant'];

From a9dbc3d181591368fd3a20cf7a7c55ee39e58996 Mon Sep 17 00:00:00 2001
From: Chulinuwu <ananzxzoxd@gmail.com>
Date: Sat, 14 Sep 2024 13:28:45 +0700
Subject: [PATCH 7/7] refactor:variant name

---
 src/styles/tailwind/list.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/tailwind/list.ts b/src/styles/tailwind/list.ts
index ed3bba9..f1eaade 100644
--- a/src/styles/tailwind/list.ts
+++ b/src/styles/tailwind/list.ts
@@ -4,8 +4,8 @@ export const listVariants = tv({
 	base: 'rounded-lg p-4',
 	variants: {
 		variant: {
-			pink: 'bg-[#FFEBE7]',
-			grey: 'bg-[#F7F7F7]',
+			pink: 'bg-sucu-pink-05',
+			grey: 'bg-sucu-gray-light',
 			default: 'bg-white'
 		}
 	},