103 lines
3.8 KiB
JavaScript
103 lines
3.8 KiB
JavaScript
"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;
|