42 lines
1.1 KiB
Svelte
42 lines
1.1 KiB
Svelte
<!-- Component: Drawer -->
|
|
<script lang="ts">
|
|
import { Button } from '$shared/shadcn/ui/button';
|
|
import {
|
|
Content as DrawerContent,
|
|
Footer as DrawerFooter,
|
|
Header as DrawerHeader,
|
|
Root as DrawerRoot,
|
|
Trigger as DrawerTrigger,
|
|
} from '$shared/shadcn/ui/drawer';
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
isOpen?: boolean;
|
|
trigger?: Snippet<[{ isOpen: boolean; onClick: () => void }]>;
|
|
content?: Snippet<[{ isOpen: boolean; className?: string }]>;
|
|
contentClassName?: string;
|
|
}
|
|
|
|
let { isOpen = $bindable(false), trigger, content, contentClassName }: Props = $props();
|
|
|
|
function handleClick() {
|
|
isOpen = !isOpen;
|
|
}
|
|
</script>
|
|
|
|
<DrawerRoot bind:open={isOpen}>
|
|
<DrawerTrigger>
|
|
{#if trigger}
|
|
{@render trigger({ isOpen, onClick: handleClick })}
|
|
{:else}
|
|
<Button onclick={handleClick}>
|
|
Open
|
|
</Button>
|
|
{/if}
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
{@render content?.({ isOpen, className: cn('min-h-60 px-2 pt-4 pb-8', contentClassName) })}
|
|
</DrawerContent>
|
|
</DrawerRoot>
|