Feat/annoucement card

src/lib/components/AnnoucementCard/AnnoucementCard.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	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 imageURL: string;
+	export let title: string;
+	export let createdAt: string;
+	export let createdBy: string;
+	export let linkHref: string;
+
+	function formatDate(dateString: string): string {
+		return dayjs(dateString).locale('th').format('DD MMMM BBBB');
+	}
+
+	function trimTitle(titleString: string): string {
+		return titleString.length > 100 ? titleString.substring(0, 100) + '...' : titleString;
+	}
+</script>
+
+<a
+	href={linkHref}
+	target="_blank"
+	class="h-[450px] w-[300px] bg-white text-sucu-gray-dark rounded shadow-card-shadow hover:shadow-card-shadow-hover transition-shadow flex flex-col items-center"
+>
+	<div class="p-3 h-[300px] w-[300px]">
+		<img src={imageURL} alt={title} width="276" height="276" class="w-[100%] rounded" />
+	</div>
+
+	<div class="p-4 h-[150px] w-[300px] flex flex-col justify-between">
+		<div
+			class={cn(
+				`max-md:${typography({ variant: 'body-medium' })}`,
+				typography({ variant: 'body-medium' }),
+				'leading-5 font-semibold'
+			)}
+		>
+			{trimTitle(title)}
+		</div>
+
+		<div class="flex justify-between mt-auto">
+			<div
+				class={cn(
+					`max-md:${typography({ variant: 'body-normal' })}`,
+					typography({ variant: 'body-normal' }),
+					'leading-4 gap-[6px]'
+				)}
+			>
+				{formatDate(createdAt)}
+			</div>
+
+			<div
+				class={cn(
+					`max-md:${typography({ variant: 'body-normal' })}`,
+					typography({ variant: 'body-normal' }),
+					'leading-4 gap-[6px]'
+				)}
+			>
+				{createdBy}
+			</div>
+		</div>
+	</div>
+</a>

src/lib/components/Playground.svelte

@@ -11,6 +11,8 @@
 	import TabsContent from './Tabs/TabsContent.svelte';
 	import Navbar from './Navbar.svelte';
 	import Footer from './Footer/Footer.svelte';
+	import AnnoucementCard from './AnnoucementCard/AnnoucementCard.svelte';
+	import thumbnail from '../assets/images/thumbnail.png';
 
 	modalShow.set(false);
 
@@ -61,6 +63,15 @@
 			? [...selectedTabs, tab.label]
 			: selectedTabs.filter((label) => label !== tab.label);
 	}
+
+	const annoucementCard = Array(6).fill({
+		imageURL: thumbnail,
+		title:
+			'ประกาศจุฬาลงกรณ์มหาวิทยาลัย เรื่อง การไปต่างประเทศหรือการเข้ามาในประเทศเพื่อศึกษา อบรม วิจัย หรือปฏิบัติงาน ในสถานการณ์ปัจจุบัน ลงวันที่ 22 พฤศจิกายน 2565',
+		createdAt: '2024-07-04',
+		createdBy: 'สภานิสิต',
+		linkHref: 'https://www.google.com'
+	});
 </script>
 
 <div>
@@ -213,6 +224,23 @@
 		/>
 	</section>
 
+	<!-- AnnoucementCard.svelte -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Announcement Card</h2>
+
+		<div class="flex gap-6 px-10 pb-10 pt-5 overflow-auto">
+			{#each annoucementCard as card}
+				<AnnoucementCard
+					imageURL={card.imageURL}
+					title={card.title}
+					createdAt={card.createdAt}
+					createdBy={card.createdBy}
+					linkHref={card.linkHref}
+				/>
+			{/each}
+		</div>
+	</section>
+
 	<Footer />
 </div>