Toast

'use client'

import { Button } from '@/components/ui/button'
import { Toaster, useToast } from '@/components/ui/toast'

function Actions() {
  const toast = useToast()
  return (
    <div className="flex flex-wrap gap-3">
      <Button
        variant="outline"
        onClick={() =>
          toast({
            title: 'Invoice sent',
            description: 'Northwind Traders will get it in a few minutes.',
            type: 'success',
            action: { label: 'Undo', onClick: () => {} },
          })
        }
      >
        Send invoice
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast({
            title: 'Couldn’t save draft',
            description: 'Check your connection and try again.',
            type: 'error',
          })
        }
      >
        Trigger an error
      </Button>
    </div>
  )
}

export default function ToastBasic() {
  return (
    <Toaster>
      <Actions />
    </Toaster>
  )
}