flowbite-svelte 0.27.13 → 0.27.15

package/src/routes/components/navbar.md

@@ -0,0 +1,349 @@
+---
+layout: componentLayout
+title: Svelte Navbar - Flowbite
+breadcrumb_title: Navbar
+dir: Components
+description: The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Badge, Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib';
+  // Props table
+  import { props as items } from '../props/Navbar.json'
+  import { props as items2 } from '../props/NavBrand.json'
+  import { props as items3 } from '../props/NavLi.json'
+  import { props as items4 } from '../props/NavUl.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="navbar/Navbar.svelte">Navbar</GitHubSource>
+<GitHubSource href="navbar/NavBrand.svelte">NavBrand</GitHubSource>
+<GitHubSource href="navbar/NavLi.svelte">NavLi</GitHubSource>
+<GitHubSource href="navbar/NavUl.svelte">NavUl</GitHubSource>
+<GitHubSource href="navbar/NavHamburger.svelte">NavHamburger</GitHubSource>
+</ExampleDiv>
+
+Get started with the responsive navbar component from Flowbite to quickly set up a navigation menu for your website and set up the logo, list of pages, CTA button, search input, user profile options with a dropdown, and more.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+</script>
+```
+
+<Htwo label="Default navbar" />
+
+Use this example of a navigation bar built with the utility classes from Tailwind CSS to enable users to navigate across the pages of your website.
+
+```svelte example hideScript
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img
+      src="https://flowbite.com/docs/images/logo.svg"
+      class="mr-3 h-6 sm:h-9"
+      alt="Flowbite Logo"
+    />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+      Flowbite
+    </span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/services">Services</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+<Htwo label="Navbar with dropdown" />
+
+This example can be used to show a secondary dropdown menu when clicking on one of the navigation links.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Dropdown, DropdownItem, Chevron, DropdownDivider } from 'flowbite-svelte'
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img
+      src="https://flowbite.com/docs/images/logo.svg"
+      class="mr-3 h-6 sm:h-9"
+      alt="Flowbite Logo"
+    />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+      Flowbite
+    </span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi id="nav-menu1" class="cursor-pointer"><Chevron aligned>Dropdown</Chevron></NavLi>
+    <NavLi href="/services">Services</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+    <Dropdown triggeredBy="#nav-menu1" class="w-44 z-20">
+      <DropdownItem>Dashboard</DropdownItem>
+      <DropdownItem>Settings</DropdownItem>
+      <DropdownItem>Earnings</DropdownItem>
+      <DropdownDivider />
+      <DropdownItem>Sign out</DropdownItem>
+    </Dropdown>
+  </NavUl>
+</Navbar>
+```
+
+<Htwo label="Navbar with search" />
+
+Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button, Input } from 'flowbite-svelte'
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img
+      src="https://flowbite.com/docs/images/logo.svg"
+      class="mr-3 h-6 sm:h-9"
+      alt="Flowbite Logo"
+    />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+      Flowbite
+    </span>
+  </NavBrand>
+  <div class="flex md:order-2">
+    <Button color="none" data-collapse-toggle="mobile-menu-3" aria-controls="mobile-menu-3" aria-expanded="false" class="md:hidden 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-2.5 mr-1" >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-white"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
+    </Button>
+    <div class="hidden relative md:block">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-white"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
+      </div>
+      <Input id="search-navbar" class="pl-10" placeholder="Search..." />
+    </div>
+    <NavHamburger on:click={toggle} />
+  </div>
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/services">Services</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+<Htwo label="Navbar with CTA button" />
+
+Use the following navbar element to show a call to action button alongside the logo and page links.
+
+```svelte example class="h-80 md:h-64"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button, Input } from 'flowbite-svelte'
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img
+      src="https://flowbite.com/docs/images/logo.svg"
+      class="mr-3 h-6 sm:h-9"
+      alt="Flowbite Logo"
+    />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+      Flowbite
+    </span>
+  </NavBrand>
+  <div class="flex md:order-2">
+    <Button size="sm">Get started</Button>
+    <NavHamburger on:click={toggle} />
+  </div>
+  <NavUl {hidden} class="order-1">
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/services">Services</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+<Htwo label="Sticky navbar" />
+
+Use this example to keep the navbar positioned fixed to the top side as you scroll down the document page.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, ImagePlaceholder, Skeleton, TextPlaceholder } from 'flowbite-svelte'
+</script>
+
+<div class="relative px-8">
+  <Navbar
+    navClass="px-2 sm:px-4 py-2.5 absolute w-full z-20 top-0 left-0 border-b"
+    let:hidden
+    let:toggle
+  >
+    <NavBrand href="/">
+      <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  <div style="height:300px;" class="overflow-scroll pb-16">
+    <Skeleton class="mt-16 mb-8" />
+    <ImagePlaceholder class="my-8" />
+    <TextPlaceholder class="my-8" />
+  </div>
+</div>
+```
+
+<Htwo label="User menu dropdown" />
+
+Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Avatar, Dropdown, DropdownItem, DropdownHeader, DropdownDivider } from 'flowbite-svelte'
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <div class="flex items-center md:order-2">
+    <Avatar id="avatar-menu" src="/images/profile-picture-3.webp" />
+    <NavHamburger on:click={toggle} class1="w-full md:flex md:w-auto md:order-1"/>
+  </div>
+  <Dropdown placement="bottom" triggeredBy="#avatar-menu">
+    <DropdownHeader>
+    <span class="block text-sm"> Bonnie Green </span>
+    <span class="block truncate text-sm font-medium"> name@flowbite.com </span>
+    </DropdownHeader>
+    <DropdownItem>Dashboard</DropdownItem>
+    <DropdownItem>Settings</DropdownItem>
+    <DropdownItem>Earnings</DropdownItem>
+    <DropdownDivider />
+    <DropdownItem>Sign out</DropdownItem>
+  </Dropdown>
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/services">Services</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+<Htwo label="Solid background" />
+
+Use this example to show a solid background for the navbar component instead of being transparent.
+
+```svelte example
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+</script>
+
+<Navbar let:hidden let:toggle rounded color="form">
+  <NavBrand href="/">
+    <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/services">Services</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+<Htwo label="Props" />
+
+<p>The component has the following props, type, and default values. See <A href="/pages/types">types 
+ page</A> for type information.</p>
+
+<h3 class='text-xl w-full dark:text-white py-4'>Navbar</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>NavBrand</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items2} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>NavLi</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items3} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>NavUl</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items4} rowState='hover' />
+</TableProp>
+
+<Htwo label="Forwarded Events" />
+
+<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4">NavLi</Heading>
+
+<div class="flex flex-wrap gap-2">
+<Badge large={true}>on:blur</Badge>
+<Badge large={true}>on:change</Badge>
+<Badge large={true}>on:click</Badge>
+<Badge large={true}>on:focus</Badge>
+<Badge large={true}>on:keydown</Badge>
+<Badge large={true}>on:keypress</Badge>
+<Badge large={true}>on:keyup</Badge>
+<Badge large={true}>on:mouseenter</Badge>
+<Badge large={true}>on:mouseleave</Badge>
+<Badge large={true}>on:mouseover</Badge>
+</div>
+
+
+<Htwo label="References" />
+
+<P>
+  <A href="https://flowbite.com/docs/components/navbar/" target="_blank" rel="noreferrer" class="link"
+    >Flowbite Navbar</A
+  >
+</P>

package/src/routes/components/pagination.md

@@ -0,0 +1,263 @@
+---
+layout: componentLayout
+title: Svelte Pagination - Flowbite
+breadcrumb_title: Pagination
+dir: Components
+description: Use the Tailwind CSS pagination element to indicate a series of content across various pages
+---
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+<script lang="ts">
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Breadcrumb, BreadcrumbItem, Badge, Heading, P, A } from '$lib'
+  ;
+  
+  import { props as items1 } from '../props/Pagination.json'
+  import { props as items2 } from '../props/PaginationItem.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="pagination/Pagination.svelte">Pagination</GitHubSource>
+<GitHubSource href="pagination/PaginationItem.svelte">Previous</GitHubSource>
+</ExampleDiv>
+
+The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte'
+</script>
+```
+
+<Htwo label="Default pagination" />
+
+Use the following list of pagination items to indicate a series of content for your website.
+
+```svelte example class="flex justify-center flex-col gap-4"
+<script>
+  import { Pagination } from 'flowbite-svelte'
+  let pages = [
+    { name: 1, href: '/'},
+    { name: 2, href: '/'},
+    { name: 3, href: '/'},
+    { name: 4, href: '/'},
+    { name: 5, href: '/'}
+  ];
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<Pagination {pages} on:previous={previous} on:next={next} />
+```
+
+<Htwo label="Pagination with icons" />
+
+The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.
+
+```svelte example class="flex justify-center"
+<script>
+  import { Pagination, ChevronLeft, ChevronRight } from 'flowbite-svelte'
+  let pages = [
+    { name: 1, href: '/' },
+    { name: 2, href: '/' },
+    { name: 3, href: '/' },
+    { name: 4, href: '/' },
+    { name: 5, href: '/' }
+  ];
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<Pagination {pages} on:previous={previous} on:next={next} icon>
+  <svelte:fragment slot="prev">
+    <span class="sr-only">Previous</span>
+    <ChevronLeft class="w-5 h-5"/>
+  </svelte:fragment>
+  <svelte:fragment slot="next">
+    <span class="sr-only">Next</span>
+    <ChevronRight class="w-5 h-5"/>
+  </svelte:fragment>
+</Pagination>
+```
+
+<Htwo label="Previous and next" />
+
+Use the following markup to show simple previous and next elements.
+
+```svelte example class="flex justify-center"
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte'
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex space-x-3">
+  <PaginationItem on:click={previous}>Previous</PaginationItem>
+  <PaginationItem on:click={next}>Next</PaginationItem>
+</div>
+```
+
+<Htwo label="Previous and next with icons" />
+
+Use the following code to show simple previous and next elements with icons.
+
+
+```svelte example class="flex justify-center"
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte'
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex space-x-3">
+  <PaginationItem class="flex items-center" on:click={previous}>
+    <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
+    Previous
+  </PaginationItem>
+  <PaginationItem class="flex items-center" on:click={next}>
+    Next
+    <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>
+  </PaginationItem>
+</div>
+```
+
+<Htwo label="Table data pagination" />
+
+You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.
+
+```svelte example 
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte'
+
+  let helper = {start: 1, end: 10, total: 100}
+
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <div class="text-sm text-gray-700 dark:text-gray-400">
+    Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span> to
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+    of <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span> Entries
+  </div>
+
+  <Pagination table>
+    <span slot="prev">Prev</span>
+  </Pagination>
+</div>
+```
+
+<Htwo label="Table data pagination with icons" />
+
+You can use the following code to show the number of data shown inside a table element and also the previous and next action buttons coupled with icons.
+
+```svelte example
+<script>
+  import { Pagination } from 'flowbite-svelte'
+
+  let helper = {start: 1, end: 10, total: 100}
+
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <div class="text-sm text-gray-700 dark:text-gray-400">
+    Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span> to
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+    of <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span> Entries
+  </div>
+
+  <Pagination table>
+    <div slot="prev" class="flex items-center gap-2">
+      <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.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
+      Prev
+    </div>
+    <div slot="next" class="flex items-center gap-2">
+      Next
+      <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.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>
+    </div>
+  </Pagination>
+</div>
+```
+
+<Htwo label="Props" />
+
+<p>The component has the following props, type, and default values. See <A href="/pages/types">types 
+ page</A> for type information.</p>
+
+<h3 class='text-xl w-full dark:text-white py-4'>Pagination</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items1} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>PaginationItem</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items2} rowState='hover' />
+</TableProp>
+
+<Htwo label="Forwarded Events" />
+
+<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4">Pagination, PaginationItem</Heading>
+
+<div class="flex flex-wrap gap-2">
+<Badge large={true}>on:blur</Badge>
+<Badge large={true}>on:click</Badge>
+<Badge large={true}>on:focus</Badge>
+<Badge large={true}>on:keydown</Badge>
+<Badge large={true}>on:keypress</Badge>
+<Badge large={true}>on:keyup</Badge>
+<Badge large={true}>on:mouseenter</Badge>
+<Badge large={true}>on:mouseleave</Badge>
+<Badge large={true}>on:mouseover</Badge>
+</div>
+
+<Htwo label="References" />
+
+<P>
+  <A href="https://flowbite.com/docs/components/pagination/" target="_blank" rel="noreferrer" class="link"
+    >Flowbite Pagination</A
+  >
+</P>