Dialog

"use client";
import { useState } from "react";
import { Button } from "@/ui";
import { Dialog } from "@/ui";

export default function Demo() {
  const [open, setOpen] = useState(false);
  const handleBackdropClick = () => {
    setOpen(false);
  };

  return (
    <div className="flex flex-col items-center gap-4">
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <Dialog open={open} onOpenChange={setOpen} onBackdropClick={handleBackdropClick}>
        <div className="flex flex-col gap-6 pt-4">
          <div className="flex flex-col gap-2">
            <h3 className="text-lg font-semibold">Welcome to Litefy</h3>
            <p className="text-sm text-muted-foreground">
              A beautiful, fast, and modern React UI library for building accessible and
              customizable web applications with ease.
            </p>
          </div>
          <Button className="w-full" onClick={() => setOpen(false)}>
            Continue
          </Button>
        </div>
      </Dialog>
    </div>
  );
}

"use client";
import { useState, useRef, useEffect } from "react";
import { DialogRoot, DialogClose, DialogContent } from "@/ui";

export default function Demo() {
  const [open, setOpen] = useState(false);
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (open) {
      if (!dialog.open) dialog.showModal();
    } else {
      if (dialog.open) dialog.close();
    }
  }, [open]);

  return (
    <div className="flex flex-col items-center gap-4">
      <button onClick={() => setOpen(true)}>Open Dialog</button>
      <DialogRoot
        ref={dialogRef}
        onCancel={(e) => {
          e.preventDefault();
          setOpen(false);
        }}
        onClose={() => setOpen(false)}
        onClick={(e) => {
          if (e.target === e.currentTarget) setOpen(false);
        }}
        className="backdrop:bg-muted/50"
      >
        <DialogClose aria-label="Close (ESC)" onClick={() => setOpen(false)}>
          ESC
        </DialogClose>
        <DialogContent className="flex flex-col gap-6 pt-4">
          <div className="flex flex-col gap-2">
            <h3 className="text-lg font-semibold">Assembled from parts</h3>
            <p className="text-sm text-muted-foreground">
              A plain <code>DialogRoot</code> plus a <code>DialogClose</code> and a{" "}
              <code>DialogContent</code>, with your own open/close lifecycle.
            </p>
          </div>
          <button
            className="w-full rounded-md border py-2 text-sm font-medium hover:bg-muted"
            onClick={() => setOpen(false)}
          >
            Continue
          </button>
        </DialogContent>
      </DialogRoot>
    </div>
  );
}

"use client";
import { Button } from "@/ui";
import { dialog } from "@/ui";
import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";

export default function Demo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button
        onClick={() => {
          dialog.success({
            title: <span className="flex gap-2"><CircleCheck className="fill-success text-background"/>Success</span>,
            children: "Operation completed successfully.",
          });
        }}
      >
        Open Success Dialog
      </Button>
      <Button
        onClick={() => {
          dialog.warning({
            title: <span className="flex gap-2"><TriangleAlert className="fill-warning text-background"/>Warning</span>,
            children: "Please check your input before submitting.",
          });
        }}
      >
        Open Warning Dialog
      </Button>
      <Button
        onClick={() => {
          dialog.error({
            title: <span className="flex gap-2"><CircleAlert className="fill-danger text-background"/>Error</span>,
            children: "Something went wrong, please try again later.",
          });
        }}
      >
        Open Error Dialog
      </Button>
      <Button
        onClick={() => {
          dialog.info({
            title: <span className="flex gap-2"><Info className="fill-info text-background"/>Info</span>,
            children: "This is an informational message.",
          });
        }}
      >
        Open Info Dialog
      </Button>
    </div>
  );
}