38 lines
936 B
Svelte
38 lines
936 B
Svelte
<script lang="ts">
|
|
let { onclose, children }: { onclose: () => void; children: any } = $props();
|
|
</script>
|
|
|
|
<!-- Backdrop -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="fixed inset-0 z-40 bg-black/40"
|
|
onclick={onclose}
|
|
onkeydown={(e) => { if (e.key === "Escape") onclose(); }}
|
|
></div>
|
|
|
|
<!-- Sheet -->
|
|
<div
|
|
class="fixed bottom-0 left-0 right-0 z-50 max-h-[70vh] overflow-y-auto rounded-t-2xl bg-surface-light shadow-xl dark:bg-card-dark animate-slide-up"
|
|
>
|
|
<!-- Drag handle -->
|
|
<div class="flex justify-center py-2">
|
|
<div class="h-1 w-8 rounded-full bg-gray-300 dark:bg-gray-600"></div>
|
|
</div>
|
|
{@render children()}
|
|
<div class="h-[env(safe-area-inset-bottom)]"></div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes slide-up {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.animate-slide-up {
|
|
animation: slide-up 0.25s ease-out;
|
|
}
|
|
</style>
|