Dialog

import { Button } from '@orbex/sonar-components/button'
import { Dialog } from '@orbex/sonar-components/dialog'
import { useState } from 'react'

/* Confirm only what cannot be undone. The main action goes last; the dialog closes on any choice. */
export default function Confirm() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button variant="outlined" onClick={() => setOpen(true)}>
        Reset to default
      </Button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        title="Reset the overview?"
        description="Your cards go back to the default layout. Cards you added stay available in Customize."
        actions={
          <>
            <Button variant="text" onClick={() => setOpen(false)}>
              Keep my layout
            </Button>
            <Button onClick={() => setOpen(false)}>Reset</Button>
          </>
        }
      />
    </>
  )
}

import { Button } from '@orbex/sonar-components/button'
import { Dialog } from '@orbex/sonar-components/dialog'
import { Status } from '@orbex/sonar-components/status'
import { useState } from 'react'

const rows = [
  ['Carrier', 'Iberia Freight'],
  ['Window', 'May 12, 08:00–10:00'],
  ['Pallets', '24 plt'],
  ['Dock', 'North · Gate 3'],
]

export default function SidePanel() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button variant="tonal" onClick={() => setOpen(true)}>
        Delivery details
      </Button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        placement="end"
        modal={false}
        title="Delivery 04-127C"
        actions={<Button onClick={() => setOpen(false)}>Track delivery</Button>}
      >
        <Status tone="warning" appearance="chip">
          Due today
        </Status>
        <dl style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 24px', margin: 0, font: 'var(--sonar-type-label-md)' }}>
          {rows.map(([term, value]) => (
            <div key={term} style={{ display: 'contents' }}>
              <dt style={{ color: 'var(--sonar-color-text-tertiary)' }}>{term}</dt>
              <dd style={{ margin: 0, color: 'var(--sonar-color-text-strong)' }}>{value}</dd>
            </div>
          ))}
        </dl>
      </Dialog>
    </>
  )
}

import { Button } from '@orbex/sonar-components/button'
import { Dialog } from '@orbex/sonar-components/dialog'
import { TextField } from '@orbex/sonar-components/field'
import { useState } from 'react'

/* On phones, panels rise from the bottom, with no scrim. Typing would be lost, so a tap outside does not close this one. */
export default function Sheet() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button variant="tonal" onClick={() => setOpen(true)}>
        New order on a phone
      </Button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        placement="bottom"
        dismissible={false}
        title="New order"
        actions={<Button onClick={() => setOpen(false)}>Place order</Button>}
      >
        <TextField label="Product" placeholder="Name or code" />
        <TextField label="Quantity" type="number" inputMode="numeric" placeholder="0" description="In pallets." />
      </Dialog>
    </>
  )
}