flowbite-svelte 0.11.1 → 0.12.2

package/README.md

@@ -10,6 +10,10 @@
 
 [Accordions](https://flowbite-svelte.vercel.app/accordions)
 
+## Avatar components
+
+[Avatar](https://flowbite-svelte.vercel.app/avatar)
+
 ## Alert components
 
 [Alerts](https://flowbite-svelte.vercel.app/alerts)
@@ -30,7 +34,7 @@
 
 [Cards](https://flowbite-svelte.vercel.app/cards)
 
-## Dark mode component
+## Dark mode components
 
 [Dark mode](https://flowbite-svelte.vercel.app/darkmode)
 
@@ -42,15 +46,15 @@
 
 [Forms](https://flowbite-svelte.vercel.app/forms)
 
-## Footer
+## Footer components
 
 [Footer](https://flowbite-svelte.vercel.app/footer)
 
-## Icons
+## Icons components
 
 [Icons](https://flowbite-svelte.vercel.app/icons)
 
-## List group component
+## List group components
 
 [List group](https://flowbite-svelte.vercel.app/list-group)
 
@@ -62,6 +66,14 @@
 
 [Navbars](https://flowbite-svelte.vercel.app/navbar)
 
+## Pagination components
+
+[Pagination](https://flowbite-svelte.vercel.app/paginations)
+
+## Sidebar components
+
+[Sidebar](https://flowbite-svelte.vercel.app/sidebars)
+
 ## Spinner components
 
 [Spinners](https://flowbite-svelte.vercel.app/spinners)
@@ -70,6 +82,14 @@
 
 [Tabs](https://flowbite-svelte.vercel.app/tabs)
 
+## Timeline components
+
+[Timeline](https://flowbite-svelte.vercel.app/timelines)
+
+## Toast components
+
+[Toast](https://flowbite-svelte.vercel.app/toasts)
+
 ## Tooltip components
 
 [Tooltips](https://flowbite-svelte.vercel.app/tooltips)

package/cards/InteractiveCard.svelte

@@ -51,11 +51,11 @@ else {
 </script>
 
 <div class={divClass}>
-	<div class="flex justify-end px-4 pt-4">
+	<div class="flex justify-end px-4 pt-4 relative">
 		<button
 			id="dropdownButton"
 			on:click={toggleDropdown}
-			class="sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+			class="hidden sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
 			type="button"
 		>
 			<svg
@@ -73,7 +73,7 @@ else {
 			id="dropdown"
 			class:hidden={isOpen}
 			class:block={!isOpen}
-			class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute"
+			class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute top-16 -right-16"
 		>
 			<ul class="py-1" aria-labelledby="dropdownButton">
 				{#each dropdownLinks as { href, name, rel }}

package/index.d.ts

@@ -52,16 +52,30 @@ export { default as SignInModal } from "./modals/SignInModal.svelte";
 export { default as SmallModal } from "./modals/SmallModal.svelte";
 export { default as Navbar } from "./navbar/Navbar.svelte";
 export { default as DropdownNavbar } from "./navbar/DropdownNavbar.svelte";
+export { default as Pagination } from "./paginations/Pagination.svelte";
+export { default as Previous } from "./paginations/Previous.svelte";
+export { default as Next } from "./paginations/Next.svelte";
+export { default as TableData } from "./paginations/TableData.svelte";
 export { default as Sidebar } from "./sidebars/Sidebar.svelte";
 export { default as Spinner } from "./spinners/Spinner.svelte";
 export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
+export { default as InteractiveTabHead } from "./tabs/InteractiveTabHead.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
+export { default as FullWidthTabs } from "./tabs/FullWidthTabs.svelte";
+export { default as IconTabs } from "./tabs/IconTabs.svelte";
 export { default as PillTabs } from "./tabs/PillTabs.svelte";
+export { default as TabContent } from "./tabs/TabContent.svelte";
+export { default as UnderlineTabs } from "./tabs/UnderlineTabs.svelte";
+export { default as Group } from "./timelines/Group.svelte";
+export { default as GroupItem } from "./timelines/GroupItem.svelte";
+export { default as Activity } from "./timelines/Activity.svelte";
+export { default as ActivityItem } from "./timelines/ActivityItem.svelte";
 export { default as Timeline } from "./timelines/Timeline.svelte";
 export { default as TimelineItem } from "./timelines/TimelineItem.svelte";
-export { default as TimelineItemVertical } from "./timelines/TimelineItemVertical.svelte";
+export { default as TimelineHorizontal } from "./timelines/TimelineHorizontal.svelte";
 export { default as TimelineItemHorizontal } from "./timelines/TimelineItemHorizontal.svelte";
+export { default as TimelineItemVertical } from "./timelines/TimelineItemVertical.svelte";
 export { default as Toast } from "./toasts/Toast.svelte";
 export { default as Tooltip } from "./tooltips/Tooltip.svelte";
 export { default as LightTooltip } from "./tooltips/LightTooltip.svelte";

package/index.js

@@ -82,6 +82,12 @@ export { default as SmallModal } from'./modals/SmallModal.svelte'
 export { default as Navbar } from'./navbar/Navbar.svelte'
 export { default as DropdownNavbar } from'./navbar/DropdownNavbar.svelte'
 
+// Pagination
+export { default as Pagination } from './paginations/Pagination.svelte'
+export { default as Previous } from './paginations/Previous.svelte'
+export { default as Next } from './paginations/Next.svelte'
+export { default as TableData } from './paginations/TableData.svelte'
+
 // Sidebar
 export { default as Sidebar } from './sidebars/Sidebar.svelte'
 
@@ -90,15 +96,25 @@ export { default as Spinner } from'./spinners/Spinner.svelte'
 export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
 
 // Tabs
+export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte'
 export { default as InteractiveTabs } from'./tabs/InteractiveTabs.svelte'
-export { default as DefaultTabs } from'./tabs/DefaultTabs.svelte'
+export { default as DefaultTabs } from './tabs/DefaultTabs.svelte'
+export { default as FullWidthTabs } from './tabs/FullWidthTabs.svelte'
+export { default as IconTabs } from './tabs/IconTabs.svelte'
 export { default as PillTabs } from './tabs/PillTabs.svelte'
+export { default as TabContent } from './tabs/TabContent.svelte'
+export { default as UnderlineTabs } from './tabs/UnderlineTabs.svelte'
 
 // Timeline
+export { default as Group } from './timelines/Group.svelte'
+export { default as GroupItem } from './timelines/GroupItem.svelte'
+export { default as Activity } from './timelines/Activity.svelte'
+export { default as ActivityItem } from './timelines/ActivityItem.svelte'
 export { default as Timeline } from './timelines/Timeline.svelte'
 export { default as TimelineItem } from './timelines/TimelineItem.svelte'
-export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte'
+export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.svelte'
 export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte'
+export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte'
 
 // Toast
 export { default as Toast } from './toasts/Toast.svelte'

package/modals/ExtraLargeModal.svelte

@@ -7,10 +7,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/ExtraLargeModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type ExtraLargeModalProps = typeof __propDef.props;
 export declare type ExtraLargeModalEvents = typeof __propDef.events;
 export declare type ExtraLargeModalSlots = typeof __propDef.slots;
 export default class ExtraLargeModal extends SvelteComponentTyped<ExtraLargeModalProps, ExtraLargeModalEvents, ExtraLargeModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/LargeModal.svelte

@@ -7,10 +7,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/LargeModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type LargeModalProps = typeof __propDef.props;
 export declare type LargeModalEvents = typeof __propDef.events;
 export declare type LargeModalSlots = typeof __propDef.slots;
 export default class LargeModal extends SvelteComponentTyped<LargeModalProps, LargeModalEvents, LargeModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/MediumModal.svelte

@@ -8,10 +8,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/MediumModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type MediumModalProps = typeof __propDef.props;
 export declare type MediumModalEvents = typeof __propDef.events;
 export declare type MediumModalSlots = typeof __propDef.slots;
 export default class MediumModal extends SvelteComponentTyped<MediumModalProps, MediumModalEvents, MediumModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/SignInModal.svelte

@@ -7,10 +7,10 @@ export let rememberMe = false;
 export let signUp;
 export let action;
 export let emailPlaceholder = 'name@company.com';
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/SignInModal.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         signUp: string;
         action: string;
         emailPlaceholder?: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,5 +21,6 @@ export declare type SignInModalProps = typeof __propDef.props;
 export declare type SignInModalEvents = typeof __propDef.events;
 export declare type SignInModalSlots = typeof __propDef.slots;
 export default class SignInModal extends SvelteComponentTyped<SignInModalProps, SignInModalEvents, SignInModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/SmallModal.svelte

@@ -7,10 +7,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/SmallModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type SmallModalProps = typeof __propDef.props;
 export declare type SmallModalEvents = typeof __propDef.events;
 export declare type SmallModalSlots = typeof __propDef.slots;
 export default class SmallModal extends SvelteComponentTyped<SmallModalProps, SmallModalEvents, SmallModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/navbar/DropdownNavbar.svelte

@@ -1,12 +1,5 @@
 <script >import { page, session } from '$app/stores';
-let hidden = true;
-let block = false;
-let activeDropdown = undefined;
-const handleDropdown = (id) => {
-    hidden = !hidden;
-    block = !block;
-    activeDropdown = id;
-};
+import NavDropdown from './NavDropdown.svelte';
 let barHidden = true;
 const handleClickbtn = () => {
     barHidden = !barHidden;
@@ -65,41 +58,16 @@ export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-f
 		</button>
 		<div class="w-full md:block md:w-auto" class:hidden={barHidden} id="mobile-menu">
 			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-				{#each menus as { id, name, href, rel, child }}
+				{#each menus as { name, href, rel, child }}
 					{#if child}
-						<li>
-							<button on:click={() => handleDropdown(id)} class={liButtonClass}
-								>{name}
-								<svg
-									class="ml-1 w-4 h-4"
-									fill="currentColor"
-									viewBox="0 0 20 20"
-									xmlns="http://www.w3.org/2000/svg"
-									><path
-										fill-rule="evenodd"
-										d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-										clip-rule="evenodd"
-									/></svg
-								></button
-							>
-							{#if activeDropdown === id}
-								<!-- Dropdown menu -->
-								<div
-									class:hidden
-									class:block
-									class={dropdownDiv}
-									style="position: absolute; margin: 0px;"
-								>
-									<ul class="py-1" aria-labelledby="dropdownLargeButton">
-										{#each child as item}
-											<li>
-												<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
-											</li>
-										{/each}
-									</ul>
-								</div>
-							{/if}
-						</li>
+						<NavDropdown
+							{liButtonClass}
+							{dropdownDiv}
+							{name}
+							{child}
+							{rel}
+							{dropdownLinkClassWithChild}
+						/>
 					{:else}
 						<li>
 							<a

package/navbar/NavDropdown.svelte

@@ -0,0 +1,41 @@
+<script >export let liButtonClass;
+export let name;
+let hidden = true;
+let block = false;
+export let child;
+const handleDropdown = () => {
+    hidden = !hidden;
+    block = !block;
+};
+export let dropdownDiv;
+export let dropdownLinkClassWithChild;
+export let rel;
+</script>
+
+<li>
+	<button on:click={() => handleDropdown()} class={liButtonClass}
+		>{name}
+		<svg
+			class="ml-1 w-4 h-4"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/></svg
+		></button
+	>
+
+	<!-- Dropdown menu -->
+	<div class:hidden class:block class={dropdownDiv} style="position: absolute; margin: 0px;">
+		<ul class="py-1" aria-labelledby="dropdownLargeButton">
+			{#each child as item}
+				<li>
+					<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</li>

package/navbar/NavDropdown.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NavbarType } from '../types';
+declare const __propDef: {
+    props: {
+        liButtonClass: string;
+        name: string;
+        child: NavbarType[];
+        dropdownDiv: string;
+        dropdownLinkClassWithChild: string;
+        rel: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NavDropdownProps = typeof __propDef.props;
+export declare type NavDropdownEvents = typeof __propDef.events;
+export declare type NavDropdownSlots = typeof __propDef.slots;
+export default class NavDropdown extends SvelteComponentTyped<NavDropdownProps, NavDropdownEvents, NavDropdownSlots> {
+}
+export {};

package/navbar/Navbar.svelte

@@ -1,5 +1,5 @@
 <script >import { page, session } from '$app/stores';
-export let sitename = 'Svelte Flow';
+export let name = 'Svelte Flow';
 export let logo = '/images/mkdir-logo.png';
 export let alt = 'Svelte Flow';
 export let textsize = 'text-sm';
@@ -19,7 +19,7 @@ export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gr
 	<div class={navDivClass}>
 		<a href="/" class="flex">
 			<img src={logo} {alt} />
-			<span class={spanClass}>{sitename}</span>
+			<span class={spanClass}>{name}</span>
 		</a>
 		<button
 			on:click={handleClickbtn}

package/navbar/Navbar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { LinkType } from '../types';
 declare const __propDef: {
     props: {
-        sitename?: string;
+        name?: string;
         logo?: string;
         alt?: string;
         textsize?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.11.1",
+  "version": "0.12.2",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -125,14 +125,30 @@
     "./modals/SmallModal.svelte": "./modals/SmallModal.svelte",
     "./modals/modalStores": "./modals/modalStores.js",
     "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
+    "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
     "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
+    "./paginations/Next.svelte": "./paginations/Next.svelte",
+    "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
+    "./paginations/Previous.svelte": "./paginations/Previous.svelte",
+    "./paginations/TableData.svelte": "./paginations/TableData.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
+    "./sidebars/SidebarDropdown.svelte": "./sidebars/SidebarDropdown.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
+    "./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
+    "./tabs/IconTabs.svelte": "./tabs/IconTabs.svelte",
+    "./tabs/InteractiveTabHead.svelte": "./tabs/InteractiveTabHead.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
+    "./tabs/TabContent.svelte": "./tabs/TabContent.svelte",
+    "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
+    "./tabs/tabStore": "./tabs/tabStore.js",
+    "./timelines/Activity.svelte": "./timelines/Activity.svelte",
+    "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
+    "./timelines/Group.svelte": "./timelines/Group.svelte",
+    "./timelines/GroupItem.svelte": "./timelines/GroupItem.svelte",
     "./timelines/Timeline.svelte": "./timelines/Timeline.svelte",
     "./timelines/TimelineHorizontal.svelte": "./timelines/TimelineHorizontal.svelte",
     "./timelines/TimelineItem.svelte": "./timelines/TimelineItem.svelte",

package/paginations/Next.svelte

@@ -0,0 +1,28 @@
+<script >import { createEventDispatcher } from 'svelte';
+export let icon = false;
+const dispatch = createEventDispatcher();
+const next = () => {
+    dispatch('next');
+};
+export let nextClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+if (!icon) {
+    nextClass += ' ml-3';
+}
+</script>
+
+<a href="/" on:click|preventDefault={next} class={nextClass}>
+	Next
+	{#if icon}
+		<svg
+			class="ml-2 w-5 h-5"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/></svg
+		>
+	{/if}
+</a>

package/paginations/Next.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        icon?: boolean;
+        nextClass?: string;
+    };
+    events: {
+        next: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NextProps = typeof __propDef.props;
+export declare type NextEvents = typeof __propDef.events;
+export declare type NextSlots = typeof __propDef.slots;
+export default class Next extends SvelteComponentTyped<NextProps, NextEvents, NextSlots> {
+}
+export {};

package/paginations/Pagination.svelte

@@ -0,0 +1,67 @@
+<script >import { createEventDispatcher } from 'svelte';
+export let icon = false;
+const dispatch = createEventDispatcher();
+const previous = () => {
+    dispatch('previous');
+};
+const next = () => {
+    dispatch('next');
+};
+export let pages;
+export let ulClass = 'inline-flex -space-x-px items-center';
+export let pageClass = 'py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let previousClass = 'py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let nextClass = 'py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let iconPreviousClass = 'block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+export let iconNextClass = 'block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
+</script>
+
+<nav aria-label="Page navigation">
+	<ul class={ulClass}>
+		<li>
+			{#if icon}
+				<a href="/" on:click|preventDefault={previous} class={iconPreviousClass}>
+					<span class="sr-only">Previous</span>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
+				</a>
+			{:else}
+				<a href="/" on:click|preventDefault={previous} class={previousClass}>Previous</a>
+			{/if}
+		</li>
+		{#each pages as { pageNum, href }}
+			<li>
+				<a {href} class={pageClass}>{pageNum}</a>
+			</li>
+		{/each}
+		<li>
+			{#if icon}
+				<a href="/" on:click|preventDefault={next} class={iconNextClass}>
+					<span class="sr-only">Next</span>
+					<svg
+						class="w-5 h-5"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+							clip-rule="evenodd"
+						/></svg
+					>
+				</a>
+			{:else}
+				<a href="/" on:click|preventDefault={next} class={nextClass}>Next</a>
+			{/if}
+		</li>
+	</ul>
+</nav>