<div>
  <.button phx-click={show_drawer("#drawer-single-default")} data-testid="drawer-default-open-button">
    Open Drawer
  </.button>
  <.drawer id="drawer-single-default">
    <div class="flex flex-col items-center" data-testid="drawer-default-content">
      <h3 class="text-heading-500 transition-colors" data-testid="drawer-default-title">
        Hello there
      </h3>
      <p class="text-body-500 transition-colors" data-testid="drawer-default-description">
        This is a drawer
      </p>
      <.button
        class="mt-space-40"
        phx-click={hide_drawer("#drawer-single-default")}
        data-testid="drawer-default-close-button"
      >
        Close
      </.button>
    </div>
  </.drawer>
</div>