no-copy-frontend/src/app/ui/notifications/notifications-list.tsx

'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>
	)
}