fix:merge dev

src/lib/components/Footer/Footer.svelte

@@ -7,7 +7,7 @@
 	import { cn } from '$lib/utils/cn';
 </script>
 
-<div class="h-auto w-full py-16 px-[135px] max-md:p-[70px] gap-6 bg-sucu-pink-05">
+<div class="bottom-0 h-auto w-full py-16 px-[135px] max-md:p-[70px] gap-6 bg-sucu-pink-05">
 	<div class="flex justify-between w-full h-full max-md:hidden">
 		<div class="h-auto w-auto gap-6 flex">
 			<div class="flex flex-col gap-3">

src/lib/components/List/List.svelte

@@ -21,7 +21,6 @@
 
 <a
 	href={linkHref}
-	target="_blank"
 	class={cn(
 		'h-auto w-full flex flex-col py-3 px-4',
 		listVariants({ variant }),

src/lib/components/Modal/Modal.svelte

@@ -38,6 +38,7 @@
 </script>
 
 {#if isModalOpen}
+	<div class="fixed z-50 inset-0 bg-gray-700 bg-opacity-40 backdrop-blur-sm" />
 	<div class="fixed inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center z-50">
 		<div
 			class="bg-white h-[500px] max-md:h-[600px] max-md:w-[400px] w-[800px] rounded p-[36px] flex flex-col"

src/lib/components/Navbar.svelte

@@ -10,7 +10,7 @@
 
 	const navItems = [
 		{ name: 'ประกาศ', href: '/' },
-		{ name: 'เอกสาร', href: '/' },
+		{ name: 'เอกสาร', href: '/document' },
 		{ name: 'งบประมาณและสถิติ', href: '/' },
 		{ name: 'สโมสรนิสิตฯ', href: '/' }
 	];

src/lib/components/Pagination/Pagination.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn';
+	import Fa from 'svelte-fa';
+	import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+	import Dropdown from '../Dropdown/Dropdown.svelte';
+
+	export let Arrayitem: string[] = [];
+	export let pageChoice: string[] = ['5', '10', '15'];
+	export let itemsPerPage: string = '5';
+
+	let currentPage: number | string = 1;
+	let totalPages: number = Math.ceil(Arrayitem.length / parseInt(itemsPerPage));
+	let paginatedItems: string[] = [];
+
+	function changePage(page: number | string) {
+		currentPage = page;
+		paginateItems();
+	}
+
+	function paginateItems() {
+		const startIndex = (Number(currentPage) - 1) * parseInt(itemsPerPage);
+		const endIndex = startIndex + parseInt(itemsPerPage);
+		paginatedItems = Arrayitem.slice(startIndex, endIndex);
+	}
+
+	function getVisiblePages(totalPages: number, currentPage: number) {
+		let pages = [];
+		if (totalPages <= 7) {
+			pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+		} else {
+			pages.push(1);
+			if (currentPage > 4) {
+				pages.push('...');
+			}
+			let startPage = Math.max(2, currentPage - 2);
+			let endPage = Math.min(totalPages - 1, currentPage + 2);
+			for (let i = startPage; i <= endPage; i++) {
+				pages.push(i);
+			}
+			if (currentPage < totalPages - 3) {
+				pages.push('...');
+			}
+			pages.push(totalPages);
+		}
+		return pages;
+	}
+
+	$: {
+		totalPages = Math.ceil(Arrayitem.length / parseInt(itemsPerPage));
+		paginateItems();
+	}
+
+	$: if (!itemsPerPage || parseInt(itemsPerPage) < 1) {
+		itemsPerPage = '5';
+	}
+
+	$: paginateItems();
+</script>
+
+<div class="flex flex-col gap-2 justify-center items-center">
+	<div class="flex gap-2 max-md:flex-col max-md:gap-1">
+		<div class="flex gap-2 max-md:gap-1">
+			<button
+				class="px-4 py-2 rounded bg-white border max-md:scale-75"
+				on:click={() => changePage(Number(currentPage) - 1)}
+				disabled={currentPage === 1}
+			>
+				<Fa icon={faChevronLeft} scale={0.75} />
+			</button>
+
+			<div class="gap-2 flex flex-wrap">
+				{#each getVisiblePages(totalPages, Number(currentPage)) as page}
+					{#if page === '...'}
+						<span class="px-4 py-2 max-md:scale-75">...</span>
+					{:else}
+						<button
+							class={cn(
+								'  px-4 max-md:px-4 py-2 rounded max-md:scale-75',
+								currentPage === page ? 'text-white bg-sucu-pink-02 ' : 'text-black bg-white border'
+							)}
+							on:click={() => changePage(page)}
+						>
+							{page}
+						</button>
+					{/if}
+				{/each}
+			</div>
+
+			<button
+				class="px-4 py-2 rounded bg-white border max-md:scale-75"
+				on:click={() => changePage(Number(currentPage) + 1)}
+				disabled={Number(currentPage) === totalPages}
+			>
+				<Fa icon={faChevronRight} scale={0.75} />
+			</button>
+		</div>
+		<div class="flex gap-2 max-md:gap-1">
+			<div class="flex items-center max-md:scale-75">
+				<Dropdown
+					items={pageChoice}
+					bind:currentChoice={itemsPerPage}
+					outerClass="w-20 bg-opacity-50 "
+					on:change={(e) => (itemsPerPage = e.detail)}
+				/>
+			</div>
+			<div class="flex items-center">/ page</div>
+		</div>
+	</div>
+</div>
+
+<div class="items-list mt-5">
+	{#each paginatedItems as item}
+		<div class="item">
+			{item}
+		</div>
+	{/each}
+</div>

src/lib/components/Playground.svelte

@@ -13,11 +13,11 @@
 	import TabsList from './Tabs/TabsList.svelte';
 	import TabsTrigger from './Tabs/TabsTrigger.svelte';
 	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';
 	import OrganizationCard from './OrganizationCard/OrganizationCard.svelte';
+	import Pagination from './Pagination/Pagination.svelte';
+	import Footer from './Footer/Footer.svelte';
 
 	modalShow.set(false);
 
@@ -80,6 +80,38 @@
 		'ปี 2564',
 		'ปีย้าวยาวววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววว'
 	];
+	let PaginationMockitem: string[] = [
+		'1',
+		'2',
+		'3',
+		'4',
+		'5',
+		'6',
+		'7',
+		'8',
+		'9',
+		'10',
+		'11',
+		'12',
+		'13',
+		'14',
+		'15',
+		'16',
+		'17',
+		'18',
+		'19',
+		'20',
+		'21',
+		'22',
+		'23',
+		'24',
+		'25',
+		'26',
+		'27',
+		'28',
+		'29',
+		'30'
+	];
 
 	const annoucementCard = Array(3).fill({
 		imageURL: thumbnail,
@@ -101,7 +133,6 @@
 
 <div>
 	<!-- Typography Section -->
-	<Navbar />
 	<section class="section">
 		<h2 class="font-bold text-2xl mb-4">Typography Variants</h2>
 		{#each typographyVariants as variant}
@@ -308,6 +339,10 @@
 		<OrganizationCard />
 	</section>
 
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Pagination</h2>
+		<Pagination Arrayitem={PaginationMockitem} />
+	</section>
 	<Footer />
 </div>
 

src/lib/utils/date.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import buddhistEra from 'dayjs/plugin/buddhistEra';
+import 'dayjs/locale/th';
+import 'dayjs/locale/th';
+
+dayjs.extend(buddhistEra);
+
+export function formatDateTH(dateString: string): string {
+	return dayjs(dateString).locale('th').format('DD MMMM BBBB');
+}

src/routes/+layout.svelte

@@ -1,5 +1,11 @@
 <script>
+	import Footer from '$lib/components/Footer/Footer.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
 	import '../styles/app.css';
 </script>
 
-<slot />
+<div>
+	<Navbar />
+	<slot />
+	<Footer />
+</div>

src/routes/announcement/+page.svelte

@@ -136,7 +136,6 @@
 </script>
 
 <div>
-	<Navbar />
 
 	<div class="relative flex w-full h-[500px]">
 		<button
@@ -221,6 +220,4 @@
 			</TabsContent>
 		</TabsRoot>
 	</MaxWidthWrapper>
-
-	<Footer />
 </div>

src/routes/document/+page.svelte

@@ -113,10 +113,10 @@
 
 <MaxWidthWrapper class="mt-10 space-y-12">
 	<div class="flex flex-col gap-3 items-start">
+		<button on:click={() => history.back()} class="lg:relative -left-14 top-12">
+			<Fa icon={faCircleArrowLeft} size="lg" />
+		</button>
 		<div class="flex items-center gap-4">
-			<button on:click={() => history.back()} class="lg:relative -left-60 top-2">
-				<Fa icon={faCircleArrowLeft} size="lg" />
-			</button>
 			<h1 class={cn(typography({ variant: 'heading3' }), 'md:text-5xl lg:order-first')}>เอกสาร</h1>
 		</div>
 		<p class="text-sucu-gray lg:w-full">

src/routes/document/[id]/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import MaxWidthWrapper from '$lib/components/MaxWidthWrapper.svelte';
+	import { cn } from '$lib/utils';
+	import { faCircleArrowLeft } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
+	import { typography } from '../../../styles/tailwind/typography';
+	import dayjs from 'dayjs';
+	import buddhistEra from 'dayjs/plugin/buddhistEra';
+	import 'dayjs/locale/th';
+	import { formatDateTH } from '$lib/utils/date';
+	import Button from '$lib/components/Button.svelte';
+	import { modalShow } from '$lib/components/Modal/store';
+	import Modal from '$lib/components/Modal/Modal.svelte';
+
+	export let data;
+	const { document } = data;
+
+	modalShow.set(false);
+
+	dayjs.extend(buddhistEra);
+</script>
+
+<MaxWidthWrapper class="mt-10 space-y-6 lg:space-y-12 min-h-screen">
+	<div class="flex flex-col gap-3 items-start">
+		<button on:click={() => history.back()} class="lg:relative -left-14 top-12">
+			<Fa icon={faCircleArrowLeft} size="lg" />
+		</button>
+		<div class="flex items-center gap-4">
+			<h1 class={cn(typography({ variant: 'heading4' }), 'md:text-5xl lg:order-first')}>
+				{document?.title}
+			</h1>
+		</div>
+		<div>
+			<p>
+				โดย {document?.author.first_name}
+			</p>
+			<p>{formatDateTH(document?.updated_at || '')}</p>
+		</div>
+	</div>
+
+	<hr class="border-t border-gray-300 my-12" />
+
+	<div class="flex flex-col gap-6 lg:gap-12">
+		<p>{document?.content.repeat(8)}</p>
+		<div class="w-[342px] h-[220px] lg:w-[876px] lg:h-[500px] bg-sucu-gray-light" />
+		<Button class="w-fit mb-16" on:click={() => modalShow.set(true)}
+			>ดาวน์โหลดเอกสารที่เกี่ยวข้อง</Button
+		>
+		{#if modalShow}
+			<Modal />
+		{/if}
+	</div>
+</MaxWidthWrapper>

src/routes/document/[id]/+page.ts

@@ -0,0 +1,8 @@
+import { documents } from '$lib/mock/document';
+import type { PageLoad } from './$types';
+import 'dayjs/locale/th';
+
+export const load: PageLoad = async ({ params }) => {
+	const document = documents.find((doc) => doc.id === params.id);
+	return { params, document };
+};