Reshaped Toast

import { Button, Reshaped } from "reshaped/bundle";
import { useToast } from "@/components/ui/reshaped-toast";

const CheckCheckIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M18 6 7 17l-5-5" />
    <path d="m22 10-7.5 7.5L13 16" />
  </svg>
);

function Trigger() {
  const toast = useToast();
  return (
    <Button
      onClick={() => {
        const id = toast.show({
          text: "Notification sent",
          icon: CheckCheckIcon,
          actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
          color: "positive",
          timeout: 0,
        });
      }}
    >
      Show notification
    </Button>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ minHeight: 420, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <Trigger />
      </div>
    </Reshaped>
  );
}