Feat/annoucement card

src/lib/components/AnnoucementCard/AnnoucementCard.svelte

@@ -0,0 +1,92 @@
+<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';
+	import { onMount } from 'svelte';
+
+	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 > 75 ? titleString.substring(0, 75) + '...' : titleString;
+	}
+
+	let isMobile = false;
+
+	const checkScreenSize = () => {
+		isMobile = window.innerWidth < 768;
+	};
+
+	onMount(() => {
+		checkScreenSize();
+		window.addEventListener('resize', checkScreenSize);
+		return () => window.removeEventListener('resize', checkScreenSize);
+	});
+</script>
+
+<a
+	href={linkHref}
+	target="_blank"
+	class="h-[450px] w-[300px] max-md:w-[140px] max-md:h-[222px] 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] max-md:w-full max-md:h-auto max-md:p-2">
+		{#if imageURL || imageURL.length > 0}
+			<img src={imageURL} alt={title} width="276" height="276" class="w-[100%] rounded" />
+		{:else}
+			<div
+				class="w-[276px] h-[276px] max-md:w-full max-md:h-[124px] bg-gray-300 rounded animate-pulse"
+			></div>
+		{/if}
+	</div>
+
+	<div
+		class="p-4 h-[150px] w-[300px] max-md:w-[140px] max-md:h-full max-md:p-2 max-md:pt-0 flex flex-col justify-between"
+	>
+		<div
+			class={cn(
+				isMobile ? typography({ variant: 'body-small' }) : typography({ variant: 'body-medium' }),
+				'leading-5 font-semibold h-auto',
+				isMobile ? 'leading-3' : ''
+			)}
+		>
+			{trimTitle(title)}
+		</div>
+
+		<div class="flex justify-between mt-auto">
+			<div
+				class={cn(
+					isMobile
+						? typography({ variant: 'body-very-small' })
+						: typography({ variant: 'body-normal' }),
+					'gap-[6px] h-auto',
+					isMobile ? 'leading-2' : 'leading-4'
+				)}
+			>
+				{formatDate(createdAt)}
+			</div>
+
+			<div
+				class={cn(
+					isMobile
+						? typography({ variant: 'body-very-small' })
+						: typography({ variant: 'body-normal' }),
+					'gap-[6px] h-auto',
+					isMobile ? 'leading-2' : 'leading-4'
+				)}
+			>
+				{createdBy}
+			</div>
+		</div>
+	</div>
+</a>

src/lib/components/Playground.svelte

@@ -15,6 +15,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);
 
@@ -77,6 +79,23 @@
 		'ปี 2564',
 		'ปีย้าวยาวววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววว'
 	];
+
+	const annoucementCard = Array(3).fill({
+		imageURL: thumbnail,
+		title:
+			'ประกาศจุฬาลงกรณ์มหาวิทยาลัย เรื่อง การไปต่างประเทศหรือการเข้ามาในประเทศเพื่อศึกษา อบรม วิจัย หรือปฏิบัติงาน ในสถานการณ์ปัจจุบัน ลงวันที่ 22 พฤศจิกายน 2565',
+		createdAt: '2024-07-04',
+		createdBy: 'สภานิสิต',
+		linkHref: 'https://www.google.com'
+	});
+
+	annoucementCard.push({
+		imageURL: '',
+		title: 'ประกาศรับสมัครคณะกรรมาธิการวิสามัญพิจารณางบประมาณสโมสรนิสิตฯ',
+		createdAt: '2024-07-04',
+		createdBy: 'สภานิสิต',
+		linkHref: 'https://www.google.com'
+	});
 </script>
 
 <div>
@@ -265,6 +284,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>