From 8be1065eca9c4785bdb272255c5fcd46b3ef8d2e Mon Sep 17 00:00:00 2001
From: Sirawit Chanaburanasak <ext.sirawit@skooldio.com>
Date: Wed, 30 Oct 2024 22:12:44 +0700
Subject: [PATCH] feat: update minor detail and add mock data to `playground`

---
 src/lib/components/Playground.svelte          | 27 ++++++++++++++++---
 .../StatisticCard/StatisticCard.svelte        | 16 +++++------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index 4cb0325..b06de00 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -344,12 +344,31 @@
 		<Pagination Arrayitem={PaginationMockitem} />
 	</section>
 
-	<section class="section w-fit">
+	<section class="section w-full space-y-4">
 		<h2 class="font-bold text-2xl mb-4">StatisticCard</h2>
-		<StatisticCard></StatisticCard>
-		<StatisticCard></StatisticCard>
-		<StatisticCard></StatisticCard>
+		<StatisticCard 
+			title="สถิติการเข้าประชุมของ ส.ส. ปีการศึกษา 2566" 
+			createAt="04 กรกฎาคม 2567" 
+			infoType="สถิติ" 
+			organization="สภานิสิตฯ" 
+			hrefUrl="https://example.com/statistics-meeting-2566" 
+		/>
+		<StatisticCard 
+			title="งบประมาณโครงการ 17 is Right Here" 
+			createAt="04 กรกฎาคม 2567" 
+			infoType="งบประมาณ" 
+			organization="องค์กรบริหารสโมสรนิสิต (อบจ.)" 
+			hrefUrl="https://example.com/budget-project-17" 
+		/>
+		<StatisticCard 
+			title="สถิติการเข้าประชุมของ ส.ส. ปีการศึกษา 2566" 
+			createAt="04 กรกฎาคม 2567" 
+			infoType="สถิติ" 
+			organization="สภานิสิตฯ" 
+			hrefUrl="https://example.com/statistics-meeting-2566" 
+		/>
 	</section>
+	
 </div>
 
 <style>
diff --git a/src/lib/components/StatisticCard/StatisticCard.svelte b/src/lib/components/StatisticCard/StatisticCard.svelte
index aee09d5..723b382 100644
--- a/src/lib/components/StatisticCard/StatisticCard.svelte
+++ b/src/lib/components/StatisticCard/StatisticCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { faCalendar, faChalkboard, faPencil } from '@fortawesome/free-solid-svg-icons';
+	import { faCalendar, faChartSimple, faPencil } from '@fortawesome/free-solid-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
 	import thumbnail from '../../assets/images/thumbnail.png';
 
@@ -12,31 +12,31 @@
 </script>
 
 <div
-	class="flex flex-col md:flex-row bg-white rounded-md overflow-hidden shadow-card-shadow w-full md:w-[1040px] h-auto md:h-[200px] p-2 my-4"
+	class="flex flex-col md:flex-row bg-white rounded-sm overflow-hidden shadow-card-shadow w-full p-3"
 >
 	<div class="w-full md:w-[276px] h-[180px] mb-4 md:mb-0">
 		<img src={imageUrl} alt={title} class="w-full h-full object-cover" />
 	</div>
 	<div class="px-2 md:px-7 py-2 flex flex-col justify-between w-full">
 		<div>
-			<p class="text-xl md:text-2xl font-semibold text-sucu-gray-dark mb-2">
+			<p class="text-xl md:text-2xl font-medium text-sucu-gray-dark mb-2">
 				{title}
 			</p>
 			<div class="flex items-center text-lg md:text-xl text-sucu-gray-dark mb-3 md:mb-5">
 				<FontAwesomeIcon icon={faCalendar} class="mr-3" />
-				<p>{createAt}</p>
+				<p class="font-light">{createAt}</p>
 			</div>
 		</div>
 
-		<div class="flex flex-row justify-between pt-3 md:py-0">
+		<div class="flex flex-row justify-between space-x-2">
 			<div class="mb-4 md:mb-0">
 				<div class="flex items-center mb-2">
-					<FontAwesomeIcon icon={faChalkboard} class="mr-3" />
-					<p class="text-sucu-gray-dark">{infoType}</p>
+					<FontAwesomeIcon icon={faChartSimple} class="mr-3" />
+					<p class="text-sucu-gray-dark font-light">{infoType}</p>
 				</div>
 				<div class="flex items-center">
 					<FontAwesomeIcon icon={faPencil} class="mr-3" />
-					<p class="text-sucu-gray-dark">{organization}</p>
+					<p class="text-sucu-gray-dark font-light">{organization}</p>
 				</div>
 			</div>
 			<a href={hrefUrl} class="text-black text-lg md:text-xl self-center"> อ่านต่อ » </a>