flotilla/src/lib/components/Drawer.svelte

<script lang="ts">
  import type {Component} from "svelte"
  import {fade, translate} from "@lib/transition"

  type Props = {
    onClose?: any
    children: {
      component: Component
      props: Record<string, any>
    }
  }

  const {onClose, children}: Props = $props()
</script>

<div class="drawer fixed inset-0 z-modal">
  <button
    aria-label="Close drawer"
    class="absolute inset-0 cursor-pointer bg-black opacity-50"
    transition:fade
    onclick={onClose}>
  </button>
  <div
    class="bg-surface scroll-container py-sai pr-sair absolute bottom-0 right-0 top-0 w-72 overflow-auto lg:w-96"
    transition:translate={{axis: "x", duration: 300}}>
    <children.component {...children.props} />
  </div>
</div>