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}
        title="Welcome to Litefy"
      >
        <div className="flex flex-col gap-6">
          <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>
          <Button className="w-full" onClick={() => setOpen(false)}>
            Continue
          </Button>
        </div>
      </Dialog>
    </div>
  );
}

"use client";
import { useState, useRef, useEffect } from "react";
import { Button, 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 variant="outline" 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 variant="outline" className="w-full" onClick={() => setOpen(false)}>
            Continue
          </Button>
        </DialogContent>
      </DialogRoot>
    </div>
  );
}

"use client";
import { Button } from "@/ui";
import { dialog } from "@/ui";

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