feat(Drawer): create reusable Drawer component with snippets for trigger and content
This commit is contained in:
41
src/shared/ui/Drawer/Drawer.svelte
Normal file
41
src/shared/ui/Drawer/Drawer.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<!-- 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 }]>;
|
||||
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 class={cn('min-h-60', contentClassName)}>
|
||||
{@render content?.({ isOpen })}
|
||||
</DrawerContent>
|
||||
</DrawerRoot>
|
||||
Reference in New Issue
Block a user