UltraQualityModal

"use client";

import React, { useState } from "react";
import { UltraQualityModal } from "@/components/ui/ultra-quality-modal";

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

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
      <button
        onClick={() => setIsOpen(true)}
        className="px-5 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-300"
      >
        Open Modal
      </button>

      <UltraQualityModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Welcome to UltraQualityModal"
      >
        <p>
          This is a sleek, accessible modal dialog. It traps focus,
          dims the background, and animates in and out for a polished feel.
        </p>
      </UltraQualityModal>
    </div>
  );
}