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