25 lines
637 B
Svelte
25 lines
637 B
Svelte
<script lang="ts">
|
|
import { Button } from 'bits-ui';
|
|
|
|
let { Icon = null, children, active, ...others } = $props();
|
|
</script>
|
|
|
|
<li role="none">
|
|
<Button.Root
|
|
role="menuitem"
|
|
class="flex items-center cursor-pointer px-4 py-1 rounded-full transition-all duration-300 ease-in-out
|
|
{active ? 'bg-neutral-100 text-neutral-900' : 'hover:bg-neutral-600'}"
|
|
{...others}
|
|
>
|
|
{#if Icon}
|
|
<Icon
|
|
class="block overflow-hidden transition-all duration-300 ease-in-out
|
|
{children ? 'w-0 text-neutral-900' : ''}
|
|
{active ? 'w-5 mr-2' : ''}"
|
|
/>
|
|
{/if}
|
|
|
|
{@render children?.()}
|
|
</Button.Root>
|
|
</li>
|