Modal

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Modal } from "@/components/ui/modal";
import { TriangleAlert } from "@/components/ui/icons";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>Cancel order</Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        size="sm"
        headerIcon={<TriangleAlert />}
        title="Cancel order #1042?"
        footer={<><Button variant="outline" onClick={() => setOpen(false)}>Keep it</Button><Button variant="destructive" onClick={() => setOpen(false)}>Cancel order</Button></>}
      >
        The tea has already been packed. You will get your money back to bKash in 2 days.
      </Modal>
    </>
  );
}

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Modal } from "@/components/ui/modal";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>Add a gift note</Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        size="lg"
        title="Gift note"
        footer={<><Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button><Button onClick={() => setOpen(false)}>Save note</Button></>}
      >
        <div style={{ display: "grid", gap: 12 }}>
          <Input label="To" placeholder="Israt Jahan" />
          <Input label="Message" placeholder="Happy birthday!" />
          <Checkbox label="Hide the price on the receipt" defaultChecked />
        </div>
      </Modal>
    </>
  );
}