feat: update minor detail and add mock data to playground

isd-sgcu · Oct 30, 2024 · 8be1065 · 8be1065
1 parent a4508e7
commit 8be1065
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git 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
@@ -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>