volontery/frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init front

Browse Source
This commit is contained in:
fullofempt
2025-12-12 20:22:50 +05:00
parent a79c26085b
commit 55c42a115d
26 changed files with 8222 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
app/components/RequestDetailsModal.jsx Normal file
View File

@@ -0,0 +1,161 @@
import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
const RequestDetailsModal = ({ request, onClose }) => {
const isDone = request.status === "Выполнена";
const isRejected = request.status === "Отклонена";
const [rating, setRating] = useState(0);
const [review, setReview] = useState("");
const [rejectFeedback, setRejectFeedback] = useState("");
const handleStarClick = (value) => {
setRating(value);
};
const handleSubmit = () => {
console.log("Оставить отзыв:", {
id: request.id,
status: request.status,
rating,
review,
rejectFeedback,
});
onClose();
};
return (
<div className="fixed inset-0 z-40 flex flex-col bg-[#90D2F9] px-4 pt-4 pb-20">
{/* Заголовок */}
<div className="flex items-center gap-2 mb-3">
<button
type="button"
onClick={onClose}
className="text-white w-7 h-7 rounded-full flex items-center justify-center text-lg"
>
←
</button>
<p className="flex-1 text-center font-montserrat font-extrabold text-[20px] leading-[24px] text-white">
Заявка от {request.createdAt}
</p>
<span className="w-7" />
</div>
{/* Белая карточка как на макете */}
<div className="flex-1 flex items-start justify-center">
<div className="w-full max-w-[360px] bg-white rounded-3xl p-4 flex flex-col gap-4 shadow-lg">
{/* Статус + срок (берём цвет и текст из заявки) */}
<div className="flex items-start justify-between">
<span
className="inline-flex items-center justify-center px-3 py-1 rounded-full font-montserrat text-[10px] font-semibold text-white"
style={{ backgroundColor: request.statusColor }}
>
{request.status}
</span>
<div className="text-right leading-tight">
<p className="font-montserrat text-[10px] text-black">
{request.date}
</p>
<p className="font-montserrat text-[10px] text-black">
{request.time}
</p>
</div>
</div>
{/* Название задачи */}
<p className="font-montserrat font-semibold text-[16px] leading-[20px] text.black">
{request.title}
</p>
{/* ВЫПОЛНЕНА: голубой блок с отзывом как было */}
{isDone && (
<div className="bg-[#72B8E2] rounded-3xl p-3 flex flex-col gap-2">
<p className="font-montserrat font-bold text-[12px] text-white">
Отзыв
</p>
<textarea
value={review}
onChange={(e) => setReview(e.target.value)}
rows={4}
className="w-full bg-[#72B8E2] rounded-2xl px-3 py-2 text-sm font-montserrat text-white placeholder:text-white/70 outline-none resize-none border border-white/20"
placeholder="Напишите, как прошла помощь"
/>
</div>
)}
{/* ОТКЛОНЕНА: причина отказа + комментарий, без изменения размеров */}
{isRejected && (
<>
{request.rejectReason && (
<div className="bg-[#FF8282] rounded-3xl p-3">
<p className="font-montserrat font-bold text-[12px] text-white mb-1">
Причина отказа
</p>
<p className="font-montserrat text-[12px] text-white">
{request.rejectReason}
</p>
</div>
)}
<div className="flex flex-col gap-1">
<p className="font-montserrat font-bold text-[12px] text-black">
Ваш комментарий
</p>
<textarea
value={rejectFeedback}
onChange={(e) => setRejectFeedback(e.target.value)}
rows={4}
className="w-full rounded-2xl px-3 py-2 text-sm font-montserrat text-black placeholder:text-black/40 outline-none resize-none border border-[#FF8282]"
placeholder="Расскажите, что можно улучшить"
/>
</div>
</>
)}
{/* Оценка волонтёра — только для выполненной */}
{/* Оценка волонтера */}
{isDone && (
<div className="mt-1 flex flex-col items-center gap-2">
<p className="font-montserrat font-semibold text-[14px] text-black">
Оценить волонтера
</p>
<div className="flex gap-2">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
type="button"
onClick={() => handleStarClick(star)}
className="text-[#F6E168]"
>
<FaStar
size={26}
className={
star <= rating ? "fill-[#F6E168]" : "fill-[#F6E168]/40"
}
/>
</button>
))}
</div>
</div>
)}
</div>
</div>
{/* Кнопка внизу */}
{(isDone || isRejected) && (
<button
type="button"
onClick={handleSubmit}
className="mt-4 w-full max-w-[360px] mx-auto bg-[#94E067] rounded-full py-3 flex items-center justify-center"
>
<span className="font-montserrat font-extrabold text-[16px] text-white">
{isRejected ? "Отправить комментарий" : "Оставить отзыв"}
</span>
</button>
)}
</div>
);
};
export default RequestDetailsModal;

44
app/components/TabBar.jsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import React from "react";
import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
import { useRouter } from "next/navigation";
const TabBar = () => {
const router = useRouter();
return (
<nav className="fixed bottom-0 left-0 right-0 flex justify-center">
<div className="w-full max-w-md bg-white rounded-t-xl flex items-center justify-around py-4 shadow-inner">
<button
type="button"
onClick={() => router.push("/createRequest")}
className="flex flex-col items-center gap-1 text-[#90D2F9]"
>
<FaHome size={20} />
</button>
<button
type="button"
onClick={() => router.push("/historyRequest")}
className="flex flex-col items-center gap-1 text-[#90D2F9]"
>
<FaClock size={20} />
</button>
<button
type="button"
className="flex flex-col items-center gap-1 text-[#90D2F9]"
>
<FaNewspaper size={20} />
</button>
<button
type="button"
className="flex flex-col items-center gap-1 text-[#90D2F9]"
>
<FaCog size={20} />
</button>
</div>
</nav>
);
};
export default TabBar;