Feedback

import { Button } from '@orbex/sonar-components/button'
import { ToastProvider, useToast } from '@orbex/sonar-components/toast'
import { useState } from 'react'

/* Saving says it worked; removing offers to take it back. Neither asks first. */
function Actions() {
  const toast = useToast()
  const [shown, setShown] = useState(true)
  return (
    <>
      <Button variant="tonal" onClick={() => toast({ message: 'Layout saved.' })}>
        Save layout
      </Button>
      <Button
        variant="outlined"
        disabled={!shown}
        onClick={() => {
          setShown(false)
          toast({ message: 'Inventory removed from your overview.', action: { label: 'Undo', onClick: () => setShown(true) } })
        }}
      >
        {shown ? 'Remove Inventory' : 'Inventory removed'}
      </Button>
    </>
  )
}

export default function Undo() {
  return (
    <ToastProvider>
      <Actions />
    </ToastProvider>
  )
}

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 { Notice } from '@orbex/sonar-components/notice'

export default function Tones() {
  return (
    <>
      <Notice title="Take a look:">
        New recycled-fiber boxes are in the market.
      </Notice>
      <Notice tone="success" title="Order created.">
        PO-2210 was sent for confirmation.
      </Notice>
      <Notice tone="warning" title="Carrier changed." action={<Button size="small" variant="text">Review</Button>}>
        Delivery 04-121A now arrives with Atlas Logistics.
      </Notice>
      <Notice tone="danger" title="2 invoices overdue.">
        Pay them before May 20 to keep your credit line.
      </Notice>
    </>
  )
}