86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useRef } from 'react';
|
|
import { fetchFruits } from '@/app/lib/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>
|
|
)
|
|
} |