Merge pull request #14 from isd-sgcu/feat/AnnoucementCard

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>