Initial commit

src/components/payments/ModalQrCode.jsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { QrCode, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+const ModalQrCode = ({ isOpen, onClose, onScan }) => {
+  const inputRef = useRef(null);
+  const [tempValue, setTempValue] = useState('');
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onScan(tempValue);
+      setTempValue('');
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[99999] flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+
+      <div className="relative bg-white rounded-xl shadow-2xl p-6 w-[400px] max-w-[90vw]">
+        <button onClick={onClose} className="absolute top-4 right-4 p-1 rounded-full hover:bg-gray-100 transition-colors">
+          <X className="size-5 text-gray-500" />
+        </button>
+        <div className="text-center mb-4">
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">QR Kodni Skanerlang</h2>
+        </div>
+        <input ref={inputRef} type="text" value={tempValue} onChange={(e) => setTempValue(e.target.value)} onKeyDown={handleKeyDown} className="absolute opacity-0 pointer-events-none" />
+        <div className="relative flex items-center justify-center py-6">
+          <QrCode className="size-40 text-[#3489e3]" />
+          <div className="absolute z-10 w-44 h-[2px] bg-[#3489e3] animate-scan" />
+        </div>
+      </div>
+      <style jsx>{`
+        @keyframes scan {
+          0% {
+            top: 25%;
+            opacity: 0.2;
+          }
+          50% {
+            top: 75%;
+            opacity: 1;
+          }
+          100% {
+            top: 25%;
+            opacity: 0.2;
+          }
+        }
+        .animate-scan {
+          animation: scan 2s infinite linear;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ModalQrCode;