DialogHeader

---
import {
  Button, Dialog, DialogBody, DialogClose, DialogFooter, DialogHeader, DialogTitle,
  Field, Input, Label
} from '@santi020k/lumen-astro'
---

<Button data-ui-dialog-trigger="ex-dialog-header">Preview dialog header</Button>
<Dialog id="ex-dialog-header" aria-labelledby="ex-dialog-header-title">
  <DialogHeader>
    <DialogTitle id="ex-dialog-header-title">Edit record</DialogTitle>
    <p>Keep the task title and actions visible as content grows.</p>
  </DialogHeader>
  <DialogBody>
    <Field>
      <Label for="ex-dialog-header-name">Display name</Label>
      <Input id="ex-dialog-header-name" name="displayName" />
    </Field>
  </DialogBody>
  <DialogFooter><DialogClose variant="outline">Close preview</DialogClose></DialogFooter>
</Dialog>

'use client'

import { useState } from 'react'
import { Button, Dialog, DialogBody, DialogClose, DialogFooter, DialogHeader, DialogTitle, Input } from '@santi020k/lumen-react'

export function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>Edit record</Button>
      <Dialog open={open} onOpenChange={setOpen} aria-labelledby="record-title">
        <DialogHeader><DialogTitle id="record-title">Edit record</DialogTitle></DialogHeader>
        <DialogBody><Input name="name" aria-label="Name" /></DialogBody>
        <DialogFooter><DialogClose variant="outline">Close preview</DialogClose></DialogFooter>
      </Dialog>
    </>
  )
}

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<button type="button" data-ui-dialog-trigger="record-dialog">Edit record</button>
<lumen-dialog id="record-dialog" aria-labelledby="record-title">
  <lumen-dialog-header><lumen-dialog-title><h2 id="record-title">Edit record</h2></lumen-dialog-title></lumen-dialog-header>
  <lumen-dialog-body><label>Name <input name="name"></label></lumen-dialog-body>
  <lumen-dialog-footer><lumen-dialog-close><button type="button">Close preview</button></lumen-dialog-close></lumen-dialog-footer>
</lumen-dialog>