Drawers

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.Drawers
alias Phoenix.LiveView.JS

<Buttons.button phx-click={Drawers.show_drawer("project-drawer")}>
  New project
</Buttons.button>

<Drawers.drawer id="project-drawer">
  <div class="px-4 sm:px-6">
    <div class="flex items-start justify-between">
      <h2 class="text-base font-semibold text-gray-900 dark:text-white">
        New project
      </h2>
      <Drawers.drawer_close_button drawer_id="project-drawer" />
    </div>
  </div>
  <div class="relative mt-6 flex-1 px-4 sm:px-6">
    <p>Fill in the project details.</p>
  </div>
</Drawers.drawer>

React (JSX)

import { useState } from "react"
import { Button, Drawer } from "../ui/index.mjs"

function NewProject() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>New project</Button>
      <Drawer open={open} onClose={setOpen} title="New project">
        <p>Fill in the project details.</p>
      </Drawer>
    </>
  )
}