component: Pagination (#32)

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>

src/lib/components/ui/pagination/index.ts

@@ -0,0 +1 @@
+export { default as Pagination } from './pagination.svelte';

src/lib/components/ui/pagination/pagination.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+
+	type Link = {
+		title: string;
+		href: string;
+	};
+
+	export let next: Link | undefined = undefined;
+	export let previous: Link | undefined = undefined;
+</script>
+
+<nav class="flex w-full flex-wrap items-center justify-between">
+	{#if previous}
+		<a
+			aria-label="Go to previous page: {previous.title}"
+			href={previous.href}
+			class="relative grid gap-0.5 py-1 pl-7 pr-2 text-gray-900 transition-colors hover:text-gray-1000"
+		>
+			<span class="text-xs"> Previous </span>
+			<p class="text-base font-medium">
+				<Icons.ChevronLeft aria-hidden="true" class="absolute bottom-2 left-1 size-4" />
+				<span class="text-gray-1000">
+					{previous.title}
+				</span>
+			</p>
+		</a>
+	{/if}
+	<div aria-hidden="true" class="grow"></div>
+	{#if next}
+		<a
+			aria-label="Go to next page: {next.title}"
+			href={next.href}
+			class="relative grid gap-0.5 py-1 pl-2 pr-7 text-gray-900 transition-colors hover:text-gray-1000"
+		>
+			<span class="text-xs"> Next </span>
+			<p class="text-base font-medium">
+				<span class="text-gray-1000">
+					{next.title}
+				</span>
+				<Icons.ChevronRight aria-hidden="true" class="absolute bottom-2 right-1 size-4" />
+			</p>
+		</a>
+	{/if}
+</nav>

src/lib/config/sitemap.ts

@@ -175,7 +175,7 @@ export const aside_items: Aside = {
 		{
 			title: 'Pagination',
 			href: '/pagination',
-			status: 'soon'
+			status: 'new'
 		},
 		{
 			title: 'Progress',

src/routes/pagination/+page.svelte

@@ -1 +1,14 @@
-<h1>pagination</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import Default from './default.svelte';
+	import default_code from './default.svelte?raw';
+
+	export let data;
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="default" code={default_code}>
+		<Default />
+	</Demo>
+</PageWrapper>

src/routes/pagination/+page.ts

@@ -0,0 +1,21 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Pagination';
+	const description = 'Navigate to the previous or next page.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}

src/routes/pagination/default.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Pagination } from '$lib/components/ui/pagination';
+
+	const previous = { title: 'Home', href: '#' };
+
+	const next = { title: 'Introduction', href: '#' };
+</script>
+
+<Pagination {previous} {next} />