add header

2025-11-26 14:01:35 +07:00
parent 7a8c2cee56
commit ebca795c1b
16 changed files with 618 additions and 41 deletions
@@ -0,0 +1,87 @@
+"use client"
+
+import { useState, useRef } from 'react';
+import { fetchFruits } from '@/app/api/action';
+import { useClickOutside } from '@/app/hooks/useClickOutside';
+import Link from 'next/link';
+
+export default function NotificationsButton() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [data, setData] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const menuRef = useRef<HTMLDivElement | null>(null);
+
+
+	useClickOutside(menuRef, () => {
+		setIsOpen(false);
+	});
+
+	const fetchData = async () => {
+		setLoading(true);
+		setError(null);
+
+		try {
+			const result = await fetchFruits();
+			setData("result");
+			setIsOpen(true);
+		} catch (err) {
+			setError('error message');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const handleButtonClick = () => {
+		if (!isOpen) {
+			fetchData();
+		} else {
+			setIsOpen(false);
+		}
+	};
+
+	return (
+		<div className="notification-wrapper" ref={menuRef}>
+			<button
+				className="icon-btn"
+				id="notifications-btn"
+				title="Уведомления"
+				onClick={handleButtonClick}
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "20px", height: "20px" }}>
+					<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
+				</svg>
+			</button>
+			<div className={`notification-dropdown ${isOpen ? 'show' : ''}`}>
+				{error ? (
+					<div className="p-4 text-red-500">{error}</div>
+				) : (
+					<>
+						<div className='notification-header'>
+							<h4>Уведомления</h4>
+							<span className="notification-count">Нет новых</span>
+						</div>
+						{data ? (
+							<div className="notification-list">
+								<div className="notification-item">
+									<div className="notification-icon">✅</div>
+									<div className="notification-content">
+										<div className="notification-title">🪙 Токены добавлены</div>
+										<div className="notification-text">На ваш баланс добавлено 100 токенов. Теперь вы можете защитить ещё больше файлов!</div>
+										<div className="notification-time">4 дн назад</div>
+									</div>
+								</div>
+								{JSON.stringify(data)}
+							</div>
+						) : (
+							<p>Нет данных</p>
+						)}
+						<div className="notification-footer">
+							<Link href="/pages/notifications.php" className="notification-link">Посмотреть все</Link>
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	)
+}