add notification list, add notification page

2026-03-30 19:11:48 +07:00
parent 884fb8dc50
commit f4b0a63e23
7 changed files with 376 additions and 47 deletions
@@ -0,0 +1,132 @@
+'use client'
+
+import { useTranslations } from 'next-intl';
+import { IconCheck } from '@/app/ui/icons/icons';
+import { useState } from 'react';
+
+interface Notification {
+	id: string,
+	notificationText: string,
+	data: string,
+	link: string,
+}
+
+const noitficationList: Notification[] = [
+	{
+		id: '1',
+		notificationText: 'text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 text1',
+		data: '20.20.20',
+		link: '#'
+	},
+	{
+		id: '2',
+		notificationText: 'text2',
+		data: '20.20.20',
+		link: '#'
+	},
+	{
+		id: '3',
+		notificationText: 'text3',
+		data: '20.20.20',
+		link: '#'
+	},
+	{
+		id: '4',
+		notificationText: 'text4',
+		data: '20.20.20',
+		link: '#'
+	},
+	{
+		id: '5',
+		notificationText: 'text5',
+		data: '20.20.20',
+		link: '#'
+	}
+];
+
+export function NotificationsList() {
+	const t = useTranslations('Global');
+	const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+
+	function selectHandler(fileId: string) {
+		setSelectedFiles((prev) => {
+			const newSet = new Set(prev)
+			if (newSet.has(fileId)) {
+				newSet.delete(fileId)
+			} else {
+				newSet.add(fileId)
+			}
+			return newSet;
+		});
+	}
+
+	function clearHandler() {
+		setSelectedFiles(new Set());
+	}
+
+	return (
+		<div
+			className="block-wrapper"
+		>
+			<div
+				className="notifications-list-wrapper"
+			>
+				<div
+					className="notifications-list-header"
+				>
+					<h4>
+						{t('all-notifications')}
+					</h4>
+
+					<div
+						className="notifications-list-action"
+					>
+						{(selectedFiles.size !== 0) && (
+							<button
+								className="btn btn-primary"
+								onClick={() => {
+									clearHandler();
+								}}
+							>
+								{t('deselect')}
+							</button>
+						)}
+					</div>
+				</div>
+				<div
+					className="notifications-list-body"
+				>
+					{(noitficationList.length !== 0) && (
+						noitficationList.map(item => {
+							return (
+								<div
+									className="notification-item"
+								>
+									<div
+										className="notification-check"
+									>
+										<button
+											onClick={() => {
+												selectHandler(item.id);
+											}}
+										>
+											{selectedFiles.has(item.id) && (
+												<IconCheck />
+											)}
+										</button>
+									</div>
+
+									<div
+										className="notification-text"
+									>
+										{item.notificationText}
+									</div>
+								</div>
+							)
+						})
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}