initial commit

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

@@ -0,0 +1,25 @@
+import Root from "./pagination.svelte";
+import Content from "./pagination-content.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton,
+	NextButton,
+	Ellipsis,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton,
+	NextButton as PaginationNextButton,
+	Ellipsis as PaginationEllipsis,
+};

frontend/src/lib/components/ui/pagination/pagination-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = HTMLAttributes<HTMLUListElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ul class={cn("flex flex-row items-center gap-1", className)} {...$$restProps}>
+	<slot />
+</ul>

frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	aria-hidden
+	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	{...$$restProps}
+>
+	<Ellipsis class="h-4 w-4" />
+	<span class="sr-only">More pages</span>
+</span>

frontend/src/lib/components/ui/pagination/pagination-item.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = HTMLAttributes<HTMLLIElement>;
+	let className: $$Props["class"] = undefined;
+
+	export { className as class };
+</script>
+
+<li class={cn("", className)} {...$$restProps}>
+	<slot />
+</li>

frontend/src/lib/components/ui/pagination/pagination-link.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+	import { type Props, buttonVariants } from "$lib/components/ui/button/index.js";
+
+	type $$Props = PaginationPrimitive.PageProps &
+		Props & {
+			isActive: boolean;
+		};
+
+	type $$Events = PaginationPrimitive.PageEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let page: $$Props["page"];
+	export let size: $$Props["size"] = "sm";
+	export let isActive: $$Props["isActive"] = false;
+
+	export { className as class };
+</script>
+
+<PaginationPrimitive.Page
+	bind:page
+	class={cn(
+		buttonVariants({
+			variant: isActive ? "outline" : "ghost",
+			size,
+		}),
+		className
+	)}
+	{...$$restProps}
+	on:click
+>
+	<slot>{page.value}</slot>
+</PaginationPrimitive.Page>

frontend/src/lib/components/ui/pagination/pagination-next-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils/style.js';
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+
+	type $$Props = PaginationPrimitive.NextButtonProps;
+	type $$Events = PaginationPrimitive.NextButtonEvents;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<PaginationPrimitive.NextButton asChild let:builder>
+	<Button
+		variant="ghost"
+		size="sm"
+		class={cn('gap-1 pr-2.5', className)}
+		builders={[builder]}
+		on:click
+		{...$$restProps}
+	>
+		<slot>
+			<ChevronRight class="h-4 w-4" />
+		</slot>
+	</Button>
+</PaginationPrimitive.NextButton>

frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = PaginationPrimitive.PrevButtonProps;
+	type $$Events = PaginationPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<PaginationPrimitive.PrevButton asChild let:builder>
+	<Button
+		variant="ghost"
+		size="sm"
+		class={cn("gap-1 pl-2.5", className)}
+		builders={[builder]}
+		on:click
+		{...$$restProps}
+	>
+		<slot>
+			<ChevronLeft class="h-4 w-4" />
+		</slot>
+	</Button>
+</PaginationPrimitive.PrevButton>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = PaginationPrimitive.Props;
+	type $$Events = PaginationPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let count: $$Props["count"] = 0;
+	export let perPage: $$Props["perPage"] = 10;
+	export let page: $$Props["page"] = 1;
+	export let siblingCount: $$Props["siblingCount"] = 1;
+	export { className as class };
+
+	$: currentPage = page;
+</script>
+
+<PaginationPrimitive.Root
+	{count}
+	{perPage}
+	{siblingCount}
+	bind:page
+	let:builder
+	let:pages
+	let:range
+	asChild
+	{...$$restProps}
+>
+	<nav {...builder} class={cn("mx-auto flex w-full flex-col items-center", className)}>
+		<slot {pages} {range} {currentPage} />
+	</nav>
+</PaginationPrimitive.Root>