102 lines
3.5 KiB
JavaScript
102 lines
3.5 KiB
JavaScript
"use client";
|
||
|
||
import React from "react";
|
||
import { FaBell, FaInfoCircle } from "react-icons/fa";
|
||
import TabBar from "../components/TabBar";
|
||
|
||
const notifications = [
|
||
{
|
||
id: 1,
|
||
title: "Обновление приложения",
|
||
date: "15.12.2025",
|
||
type: "update",
|
||
text: "Мы улучшили стабильность работы и ускорили загрузку заявок.",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Новые возможности для волонтёров",
|
||
date: "10.12.2025",
|
||
type: "feature",
|
||
text: "Теперь можно оставлять отзывы о заказчиках после выполнения заявок.",
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "Советы по безопасности",
|
||
date: "05.12.2025",
|
||
type: "info",
|
||
text: "Всегда уточняйте детали заявки и не передавайте данные третьим лицам.",
|
||
},
|
||
];
|
||
|
||
const typeConfig = {
|
||
update: { label: "Обновление", color: "#71A5E9" },
|
||
feature: { label: "Новая функция", color: "#94E067" },
|
||
info: { label: "Информация", color: "#E9D171" },
|
||
};
|
||
|
||
const NotificationsPage = () => {
|
||
return (
|
||
<div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
|
||
<div className="relative w-full max-w-md flex flex-col pb-20 pt-4">
|
||
{/* Header */}
|
||
<header className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-8 h-8 rounded-full border border-white flex items-center justify-center">
|
||
<FaBell className="text-white text-sm" />
|
||
</div>
|
||
<p className="font-montserrat font-extrabold text-[20px] leading-[22px] text-white">
|
||
Уведомления
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
{/* Список уведомлений */}
|
||
<main className="bg-white rounded-xl p-4 flex flex-col gap-3 max-h-[80vh] overflow-y-auto">
|
||
{notifications.length === 0 && (
|
||
<p className="font-montserrat text-sm text-black">
|
||
Пока нет уведомлений
|
||
</p>
|
||
)}
|
||
|
||
{notifications.map((n) => {
|
||
const cfg = typeConfig[n.type] || {
|
||
label: "Уведомление",
|
||
color: "#E2E2E2",
|
||
};
|
||
return (
|
||
<div
|
||
key={n.id}
|
||
className="w-full rounded-xl bg-[#F5F5F5] px-3 py-3 flex flex-col gap-2"
|
||
>
|
||
<div className="flex items-center justify-between gap-2">
|
||
<span
|
||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full font-montserrat text-[10px] font-semibold text-white"
|
||
style={{ backgroundColor: cfg.color }}
|
||
>
|
||
<FaInfoCircle className="text-[10px]" />
|
||
{cfg.label}
|
||
</span>
|
||
<p className="font-montserrat text-[10px] text-black/70">
|
||
{n.date}
|
||
</p>
|
||
</div>
|
||
|
||
<p className="font-montserrat font-semibold text-[14px] text-black">
|
||
{n.title}
|
||
</p>
|
||
<p className="font-montserrat text-[12px] text-black/80">
|
||
{n.text}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</main>
|
||
|
||
<TabBar />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default NotificationsPage;
|