Sheet

<.button phx-click={Fluxon.open_dialog("my-sheet")}>Open sheet</.button>

<.sheet id="my-sheet">
  <h3>Sheet title</h3>

  <div class="flex justify-end gap-4 mt-6">
    <.button phx-click={Fluxon.close_dialog("my-sheet")}>Cancel</.button>
    <.button variant="solid" color="info">Some action</.button>
  </div>
</.sheet>

<.button phx-click={Fluxon.open_dialog("sheet-size-max-w-xl")}>Max width</.button>
<.sheet id="sheet-size-max-w-xl" class="max-w-xl">
  <p>A sheet with a max-width</p>
</.sheet>

<.button phx-click={Fluxon.open_dialog("sheet-size-200px")}>Fixed width</.button>
<.sheet id="sheet-size-200px" class="w-[200px]">
  <p>A fixed-width sheet</p>
</.sheet>

<.button phx-click={Fluxon.open_dialog("sheet-size-w-full")}>Full width</.button>
<.sheet id="sheet-size-w-full" class="w-full">
  <p>A full width sheet</p>
</.sheet>

<.button phx-click={Fluxon.open_dialog("animation-sheet-slow")}>Slow</.button>
<.sheet
  id="animation-sheet-slow"
  animation_enter="translate-x-0"
  animation_leave="-translate-x-full"
  animation="duration-1000"
  backdrop_class="duration-1000"
>
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("animation-sheet-opacity")}>Opacity</.button>
<.sheet
  id="animation-sheet-opacity"
  animation_enter="opacity-100"
  animation_leave="opacity-0"
>
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("animation-sheet-no-animation")}>No animation</.button>
<.sheet
  id="animation-sheet-no-animation"
  animation="transition duration-0"
  backdrop_class="duration-0"
>
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet")}>Blue Opacity</.button>
<.sheet id="custom-backdrop-sheet" backdrop_class="bg-blue-500/30">
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet-intense-blur")}>Frosted Glass</.button>
<.sheet id="custom-backdrop-sheet-intense-blur" backdrop_class="bg-black/5 backdrop-blur-lg">
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet-black-out")}>Full Blackout</.button>
<.sheet id="custom-backdrop-sheet-black-out" backdrop_class="bg-black">
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet-subtle-transparency")}>Light Dimming</.button>
<.sheet id="custom-backdrop-sheet-subtle-transparency" backdrop_class="bg-black/10">
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("sheet-1")}>Top</.button>
<.sheet id="sheet-1" placement="top" class="min-h-48">
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("sheet-2")}>Bottom</.button>
<.sheet id="sheet-2" placement="bottom" class="min-h-96">
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("sheet-3")}>Left</.button>
<.sheet id="sheet-3" placement="left">
  Content
</.sheet>

<.button phx-click={Fluxon.open_dialog("sheet-4")}>Right</.button>
<.sheet id="sheet-4" placement="right">
  Content
</.sheet>