Merge pull request #226 from Hestia-Homes/only_cruical_things

keep it minimal

src/app/components/portfolio/BulkUploadComingSoonModal.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  Transition,
+  TransitionChild,
+} from "@headlessui/react";
+import { Fragment } from "react";
+import { XMarkIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
+
+interface BulkUploadComingSoonModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  portfolioId: string;
+}
+
+export default function BulkUploadComingSoonModal({
+  isOpen,
+  onClose,
+}: BulkUploadComingSoonModalProps) {
+  return (
+    <Transition show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        <TransitionChild
+          as={Fragment}
+          enter="ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-150"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <DialogBackdrop className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
+        </TransitionChild>
+
+        <div className="fixed inset-0 flex items-center justify-center p-4">
+          <TransitionChild
+            as={Fragment}
+            enter="ease-out duration-200"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-150"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <DialogPanel className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 relative">
+              <button
+                onClick={onClose}
+                className="absolute top-4 right-4 p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+              >
+                <XMarkIcon className="h-5 w-5" />
+              </button>
+
+              <div className="flex flex-col items-center text-center gap-4">
+                <div className="w-14 h-14 rounded-2xl bg-amber-50 flex items-center justify-center">
+                  <RectangleStackIcon className="h-7 w-7 text-amber-500" />
+                </div>
+
+                <div>
+                  <span className="text-[11px] font-semibold text-amber-700 bg-amber-100 px-2 py-0.5 rounded-full">
+                    Coming Soon
+                  </span>
+                  <h2 className="mt-3 text-2xl font-extrabold text-gray-900 tracking-tight">
+                    Bulk Address Upload
+                  </h2>
+                  <p className="mt-2 text-sm text-gray-500 leading-relaxed">
+                    Upload multiple addresses in one go. This feature is currently in development
+                    and will be available soon.
+                  </p>
+                </div>
+
+                <button
+                  onClick={onClose}
+                  className="mt-2 px-6 py-2.5 rounded-xl bg-gradient-to-br from-[#14163d] to-[#15173e] text-white text-sm font-bold hover:opacity-90 transition-opacity"
+                >
+                  Got it
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}