Feat/anan/pagination

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

@@ -16,6 +16,8 @@
 	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);
 
@@ -78,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,
@@ -304,6 +338,12 @@
 		<h2 class="font-bold text-2xl mb-4">Organization Card</h2>
 		<OrganizationCard />
 	</section>
+
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Pagination</h2>
+		<Pagination Arrayitem={PaginationMockitem} />
+	</section>
+	<Footer />
 </div>
 
 <style>