Headless UI

import { Dialog } from '@headlessui/react';
import { Fragment, useState } from 'react';

function MyDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setIsOpen(true)}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        افتح الحوار
      </button>

      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
        <Dialog.Panel className="fixed inset-0 bg-black/30 flex items-center justify-center">
          <Dialog.Panel className="bg-white rounded-lg p-6 max-w-md">
            <Dialog.Title className="text-xl font-bold mb-4">
              عنوان الحوار
            </Dialog.Title>
            <Dialog.Description className="text-gray-600 mb-6">
              محتوى الحوار هنا
            </Dialog.Description>
            <button
              onClick={() => setIsOpen(false)}
              className="px-4 py-2 bg-blue-500 text-white rounded"
            >
              إغلاق
            </button>
          </Dialog.Panel>
        </Dialog.Panel>
      </Dialog>
    </>
  );
}

// Menu component
import { Menu } from '@headlessui/react';

function UserMenu() {
  return (
    <Menu as="div" className="relative">
      <Menu.Button className="px-4 py-2 bg-gray-100 rounded">
        المزيد
      </Menu.Button>
      <Menu.Items className="absolute right-0 mt-2 w-48 bg-white rounded shadow-lg">
        <Menu.Item>
          {({ active }) => (
            <button className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'} block w-full px-4 py-2 text-right`}>
              الملف الشخصي
            </button>
          )}
        </Menu.Item>
        <Menu.Item>
          {({ active }) => (
            <button className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'} block w-full px-4 py-2 text-right`}>
              الإعدادات
            </button>
          )}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  );
}