VolonteurMainPage

app/components/acceptPopUp.jsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React from "react";
+import { FaTimesCircle } from "react-icons/fa";
+
+const AcceptPopup = ({ request, isOpen, onClose, onAccept }) => {
+  if (!isOpen || !request) return null;
+
+  return (
+    <div className="fixed inset-0  z-50 flex items-center justify-center">
+      {/* затемнение */}
+      <div
+        className="absolute inset-0 bg-black/40"
+        onClick={onClose}
+      />
+
+      {/* карточка на всю страницу */}
+      <div className="relative z-10 w-full h-250px  bg-white rounded-2xl px-4 pt-4 pb-6 flex flex-col">
+        {/* крестик */}
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute top-4 right-4 text-[#FF9494]"
+        >
+          <FaTimesCircle className="w-5 h-5" />
+        </button>
+
+        {/* Заголовок */}
+        <h2 className="font-montserrat font-extrabold text-[20px] leading-[22px] text-[#90D2F9] mb-1">
+          Задача
+        </h2>
+        <p className="text-[20px] leading-[14px] mt-5 font-montserrat mb-5">
+          {request.title}
+        </p>
+
+        {/* Сумма и время */}
+        <div className="flex items-center gap-3 mb-3">
+          <div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
+            <span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
+              Сумма
+            </span>
+            <span className="text-[15px] leading-[13px] text-white font-semibold">
+              {request.amount || "2000 ₽"}
+            </span>
+          </div>
+          <div className="w-full h-[40px] bg-[#90D2F9] rounded-full flex flex-col items-center justify-center">
+            <span className="text-[12px] leading-[11px] text-white font-semibold mb-2">
+              Выполнить до
+            </span>
+            <span className="text-[15px] leading-[13px] text-white font-semibold">
+              {request.deadline || "17:00"}
+            </span>
+          </div>
+        </div>
+
+        {/* Список покупок / описание */}
+        <div className="w-full bg-[#E4E4E4] rounded-[20px] px-3 py-3 mb-3 max-h-[40vh] overflow-y-auto">
+          <p className="text-[15px] leading-[20px] font-montserrat text-black whitespace-pre-line">
+            {request.description ||
+              "Необходимо приобрести:\n1. Белый хлеб\n2. Молоко\n3. Колбаса\n4. Фрукты"}
+          </p>
+        </div>
+
+        {/* Данные человека */}
+        <div className="w-full flex flex-col gap-3 mb-4">
+          <p className="font-montserrat text-[20px] leading-[19px] font-medium">
+            Данные:
+          </p>
+          <p className="text-[20px] leading-[12px] font-montserrat">
+            ФИО: {request.fullName || "Клавдия Березова"}
+          </p>
+          <p className="text-[15px] leading-[12px] font-montserrat">
+            Место: {request.address}
+          </p>
+          {request.flat && (
+            <p className="text-[10px] leading-[12px] font-montserrat">
+              кв: {request.flat}
+            </p>
+          )}
+          {request.floor && (
+            <p className="text-[10px] leading-[12px] font-montserrat">
+              Этаж: {request.floor}
+            </p>
+          )}
+        </div>
+
+        {/* Кнопка отклика внизу */}
+        <button
+          type="button"
+          onClick={() => onAccept(request)}
+          className="mt-auto w-full h-[40px] bg-[#94E067] rounded-[10px] flex items-center justify-center"
+        >
+          <span className="font-montserrat font-bold text-[16px] leading-[19px] text-white">
+            Откликнуться
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AcceptPopup;