flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/components/avatar.md

@@ -1,228 +0,0 @@
----
-layout: componentLayout
-title: Svelte Avatar - Flowbite
-breadcrumb_title: Avatar
-dir: Components
-description: Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
----
-
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
-  // Props table
-  import { props as avatarProps } from '../props/Avatar.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'
-
-  let name;
-</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="avatar/Avatar.svelte">Avatar</GitHubSource>
-</ExampleDiv>
-
-The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.
-
-<Htwo label="Setup" />
-
-Import `Avatar`.
-If you are using the user dropdown, import `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownDivider`.
-If you are using tooltip for avatar import `Tooltip`.
-
-```svelte
-<script>
-  import { Avatar, Dropdown, DropdownHeader, DropdownItem, DropdownDivider, Tooltip } from "flowbite-svelte"
-</script>
-```
-
-<Htwo label="Default avatar" />
-
-Use this example to create a circle and rounded avatar on an image element.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-<div class="flex space-x-4">
-  <Avatar src="/images/profile-picture-2.webp"/>
-  <Avatar src="/images/profile-picture-2.webp" rounded/>
-</div>
-```
-
-<Htwo label="Bordered" />
-
-You can apply a border around the avatar component.
-
-If you can use the `ring-&#123;color&#125;` class from Tailwind CSS to modify ring color.
-
-```svelte example class="flex gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-<Avatar src="/images/profile-picture-2.webp" border/>
-<Avatar src="/images/profile-picture-2.webp" border class="ring-red-400 dark:ring-red-300"/>
-```
-
-<Htwo label="Placeholder" />
-
-When there is no custom image available a placehoder is displayed.
-
-```svelte example class="flex gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-<Avatar />
-<Avatar rounded />
-<Avatar border />
-<Avatar rounded border />
-```
-
-<Htwo label="Placeholder initials" />
-
-This example can be used to show the initials of the user’s first and last name as a placeholder when no profile picture is available.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-  <Avatar>JL</Avatar>
-```
-
-<Htwo label="Avatar tooltip" />
-
-Use this example to show a tooltip when hovering over the avatar.
-
-```svelte example class="flex gap-4"
-<script>
-  import {Avatar, Tooltip} from 'flowbite-svelte'
-</script>
-  <Avatar data-name="Jese Leos" rounded src="/images/profile-picture-1.webp"/>
-  <Avatar data-name="Robert Gouth" rounded src="/images/profile-picture-2.webp"/>
-  <Avatar data-name="Bonnie Green" rounded src="/images/profile-picture-3.webp"/>
-  <Tooltip triggeredBy="[data-name]" on:show={e => name = e.target.dataset.name}>{name}</Tooltip>
-```
-
-<Htwo label="Dot indicator" />
-
-Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
-
-```svelte example class="flex gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-<Avatar src="/images/profile-picture-3.webp" dot={{top:true, color:"bg-red-400"}}/>
-<Avatar src="/images/profile-picture-3.webp" dot={{top:true, color:"bg-red-400"}} rounded />
-<Avatar src="/images/profile-picture-3.webp" dot={{color:"bg-green-400"}}/>
-<Avatar src="/images/profile-picture-3.webp" dot={{color:"bg-green-400"}} rounded/>
-```
-
-<Htwo label="Stacked" />
-
-Use this example if you want to stack a group of users by overlapping the avatar components.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-<div class="flex mb-5">
-<Avatar src="/images/profile-picture-1.webp" stacked/>
-<Avatar src="/images/profile-picture-2.webp" stacked />
-<Avatar src="/images/profile-picture-3.webp" stacked />
-<Avatar stacked />
-</div>
-<div class="flex">
-<Avatar src="/images/profile-picture-1.webp" stacked />
-<Avatar src="/images/profile-picture-2.webp" stacked />
-<Avatar src="/images/profile-picture-3.webp" stacked />
-<Avatar stacked href="/" class="bg-gray-700 text-white hover:bg-gray-600">+99</Avatar>
-</div>
-```
-
-<Htwo label="Avatar text" />
-
-This example can be used if you want to show additional information in the form of text elements such as the user’s name and join date.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-<div class="flex items-center space-x-4">
-    <Avatar src="/images/profile-picture-1.webp" rounded/>
-    <div class="space-y-1 font-medium dark:text-white">
-        <div>Jese Leos</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
-    </div>
-</div>
-```
-
-<Htwo label="User dropdown" />
-
-Use this example if you want to show a dropdown menu when clicking on the avatar component.
-
-```svelte example class="flex justify-center h-96"
-<script>
-  import {Avatar, Dropdown, DropdownHeader, DropdownItem, DropdownDivider} from 'flowbite-svelte'
-</script>
-
-  <Avatar id="user-drop" src="/images/profile-picture-3.webp" dot={{color:'bg-green-400'}} />
-  <Dropdown triggeredBy="#user-drop">
-    <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>
-```
-
-<Htwo label="Sizes" />
-
-Select size from  xs | sm | md | lg | xl.
-
-```svelte example class="flex flex-col gap-4" hideScript
-<script>
-  import {Avatar} from 'flowbite-svelte'
-</script>
-<div class=" flex flex-wrap justify-center space-x-4">
-  <Avatar src="/images/profile-picture-3.webp" rounded size="xs" />
-  <Avatar src="/images/profile-picture-3.webp" rounded size="sm" />
-  <Avatar src="/images/profile-picture-3.webp" rounded size="md" />
-  <Avatar src="/images/profile-picture-3.webp" rounded size="lg" />
-  <Avatar src="/images/profile-picture-3.webp" rounded size="xl" />
-</div>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types 
- page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-<TableDefaultRow items={avatarProps} rowState='hover' />
-</TableProp>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/avatar/" target="_blank" rel="noreferrer" class="link">
-  Flowbite Avatar
-  </A>
-</P>

package/src/routes/components/badge.md

@@ -1,190 +0,0 @@
----
-layout: componentLayout
-title: Svelte Badge - Flowbite
-breadcrumb_title: Badge
-dir: Components
-description: Use Tailwind CSS badges as elements to show counts or labels separately or inside other components
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
-  
-  import { props as badgeProps } from '../props/Badge.json'
-  // Props table
-  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="badges/Badge.svelte">Badge</GitHubSource>
-</ExampleDiv>
-
-The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
-
-Alternatively, badges can also be used as standalone elements that link to a certain page.
-
-<Htwo label="Setup" />
-
-Import a button component in the script tag.
-
-```html
-<script>
-	import { Badge } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default badge" />
-
-Use the following badge elements to indicate counts or labels inside or outside components.
-
-```svelte example class="flex gap-1" hideScript
-<script>
-	import { Badge } from 'flowbite-svelte';
-</script>
-<Badge>Default</Badge>
-<Badge color="dark">Dark</Badge>
-<Badge color="red">Red</Badge>
-<Badge color="green">Green</Badge>
-<Badge color="yellow">Yellow</Badge>
-<Badge color="indigo">Indigo</Badge>
-<Badge color="purple">Purple</Badge>
-<Badge color="pink">Pink</Badge>
-```
-
-<Htwo label="Large badges" />
-
-Use the `large={true}` to create a large variant of the badges.
-
-```svelte example class="flex gap-1" hideScript
-<script>
-	import { Badge } from 'flowbite-svelte';
-</script>
-<Badge large={true}>Default</Badge>
-<Badge large={true} color="dark">Dark</Badge>
-<Badge large={true} color="red">Red</Badge>
-<Badge large={true} color="green">Green</Badge>
-<Badge large={true} color="yellow">Yellow</Badge>
-<Badge large={true} color="indigo">Indigo</Badge>
-<Badge large={true} color="purple">Purple</Badge>
-<Badge large={true} color="pink">Pink</Badge>
-```
-
-<Htwo label="Badges as links" />
-
-You can also use badges as anchor elements to link to another page.
-
-```svelte example hideScript
-<script>
-	import { Badge } from 'flowbite-svelte';
-</script>
-<Badge href="/" class="mr-2">Badge link</Badge>
-<Badge href="/" large>Badge link</Badge>
-```
-
-<Htwo label="Badges with icon" />
-
-You can also use SVG icons inside the badge elements.
-
-```svelte example hideScript
-<script>
-	import { Badge } from 'flowbite-svelte';
-</script>
-<Badge color="dark" class="mr-2">
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-1 w-3 h-3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>3 days ago</Badge>
-<Badge large={true}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-1 w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>2 minutes ago</Badge>
-```
-
-<Htwo label="Notification badge" />
-
-You can also use the badge elements as index. Remember to add the `relative` class to parent element.
-
-```svelte example class="flex gap-4" 
-<script>
-	import { Badge, Button } from 'flowbite-svelte';
-</script>
-
-<Button class="relative" size='sm'>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
-  <span class="sr-only">Notifications</span>
-  <Badge rounded index color="!red">20</Badge>
-</Button>
-
-<Button class="relative" size='sm'>
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
-  <span class="sr-only">Notifications</span>
-  <Badge large rounded index color="!green">20</Badge>
-</Button>
-```
-
-<Htwo label="Button with badge" />
-
-Use this example to add a badge inside a button component for a count indicator.
-
-```svelte example class="flex gap-4"
-<script>
-	import { Badge, Button } from 'flowbite-svelte';
-</script>
-
-<Button>
-  Messages<Badge rounded class="ml-2 w-5 h-5">2</Badge>
-</Button>
-```
-
-<Htwo label="Badge with icon only" />
-
-Alternatively you can also use badges which indicate only a SVG icon.
-
-```svelte example class="gap-4" hideScript
-<script>
-	import { Badge } from 'flowbite-svelte';
-</script>
-<Badge rounded ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></Badge>
-<Badge rounded color="dark" ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></Badge>
-<Badge rounded large ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></Badge>
-<Badge rounded large color="dark" ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></Badge>
-```
-
-<Htwo label="Dismissable badges" />
-
-Use the `dimissable` attribute to dismiss the current badge.
-
-```svelte example class="gap-4" hideScript
-<script>
-	import { Badge } from 'flowbite-svelte';
-</script>
-
-<Badge dismissable >Dismissable</Badge>
-<Badge dismissable large color="red">Dismissable</Badge>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types 
- page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={badgeProps} rowState='hover' />
-</TableProp>
-
-<Htwo label="References" />
-		
-<P>
-  <A href="https://flowbite.com/docs/components/badge/" target="_blank" rel="noreferrer" class="link"
-    >Flowbite Badge</A>
-</P>
-		

package/src/routes/components/breadcrumb.md

@@ -1,134 +0,0 @@
----
-layout: componentLayout
-title: Svelte Breadcrumb - Flowbite
-breadcrumb_title: Breadcrumb
-dir: Components
-description: Show the location of the current page in a hierarchical structure using the breadcrumb components
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
-  import { props as breadcrumbProps } from '../props/Breadcrumb.json'
-  import { props as breadcrumbItemProps } from '../props/BreadcrumbItem.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="breadcrumbs/Breadcrumb.svelte">Breadcrumb</GitHubSource>
-<GitHubSource href="breadcrumbs/BreadcrumbItem.svelte">BreadcrumbItem</GitHubSource>
-</ExampleDiv>
-
-The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
-
-Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default Breadcrumb" />
-
-Use the following breadcrumb example to show the hierarchical structure of pages.
-
-```svelte example hideScript
-<script>
-	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
-</script>
-<Breadcrumb aria-label="Default breadcrumb example">
-  <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
-  <BreadcrumbItem href="/">Projects</BreadcrumbItem>
-  <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
-</Breadcrumb>
-```
-
-<Htwo label="Solid Breadcrumb" />
-
-You can alternatively also use the breadcrumb components with a solid background.
-
-```svelte example hideScript
-<script>
-	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
-</script>
-<Breadcrumb aria-label="Solid background breadcrumb example" solid>
-  <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
-  <BreadcrumbItem href="/">Projects</BreadcrumbItem>
-  <BreadcrumbItem>Flowbite Svelte</BreadcrumbItem>
-</Breadcrumb>
-```
-
-<Htwo label="Icons" />
-
-Use the `icon` slot to change icons.
-
-```svelte example hideScript
-<script>
-	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
-</script>
-<Breadcrumb aria-label="Solid background breadcrumb example" class="bg-gray-50 py-3 px-5 dark:bg-gray-900">
-  <BreadcrumbItem href="/" home>
-  <svelte:fragment slot="icon">
-  <svg 
-  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-</svg>
-  </svelte:fragment>Home</BreadcrumbItem>
-  <BreadcrumbItem href="/">
-    <svelte:fragment slot="icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 dark:text-white">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
-      </svg>
-  </svelte:fragment>
-  Projects</BreadcrumbItem>
-  <BreadcrumbItem>
-    <svelte:fragment slot="icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 dark:text-white">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
-      </svg>
-    </svelte:fragment>
-  Flowbite Svelte</BreadcrumbItem>
-</Breadcrumb>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<h3 class='text-xl w-full dark:text-white py-4'>Breadcrumb</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={breadcrumbProps} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>BreadcrumbItem</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={breadcrumbItemProps} rowState='hover' />
-</TableProp>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/breadcrumb/" target="_blank" rel="noreferrer" class="link"
-    >Flowbite Breadcrumb</A
-  >
-</P>