Modal Component

Basic Modal

Large Modal

Usage Examples

Basic Modal

"use client";

import { useState } from "react";
import { Button } from "@/components/button";
import { Modal } from "@/components/modal";

export default function BasicModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Modal Title"
        description="Modal description"
      >
        <div className="p-4">
          <p>Modal content</p>
          <div className="mt-4 flex justify-end">
            <Button onClick={() => setIsOpen(false)} variant="outline" size="sm">
              Close
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

Modal with Different Sizes

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Large Modal"
  size="lg"
>
  <div className="p-4">
    <p>Content for large modal</p>
  </div>
</Modal>