frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

continue: add notification page styles

Browse Source
This commit is contained in:
smanylov
2026-03-31 13:47:27 +07:00
parent f31713a929
commit d40e3d563b
4 changed files with 179 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/notifications/notifications-list.tsx
+107 -52
View File
@@ -9,6 +9,8 @@ interface Notification {
notificationText: string,
data: string,
link: string,
title: string,
status: string,
}
const noitficationList: Notification[] = [
@@ -16,31 +18,41 @@ 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: '#'
link: '#',
title: 'title 1',
status: 'status'
},
{
id: '2',
notificationText: 'text2',
notificationText: 'text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 ',
data: '20.20.20',
link: '#'
link: '#',
title: 'title 2',
status: 'status'
},
{
id: '3',
notificationText: 'text3',
notificationText: 'text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 ',
data: '20.20.20',
link: '#'
link: '#',
title: 'title 3',
status: 'status'
},
{
id: '4',
notificationText: 'text4',
notificationText: 'text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 ',
data: '20.20.20',
link: '#'
link: '#',
title: 'title 4',
status: 'status'
},
{
id: '5',
notificationText: 'text5',
notificationText: 'text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 ',
data: '20.20.20',
link: '#'
link: '#',
title: 'title 5',
status: 'status'
}
];
@@ -50,7 +62,8 @@ export function NotificationsList() {
function selectHandler(fileId: string) {
setSelectedFiles((prev) => {
const newSet = new Set(prev)
const newSet = new Set(prev);
if (newSet.has(fileId)) {
newSet.delete(fileId)
} else {
@@ -64,68 +77,110 @@ export function NotificationsList() {
setSelectedFiles(new Set());
}
function selectAllHandler() {
setSelectedFiles(new Set(noitficationList.map(item => item.id)));
}
return (
<div
className="block-wrapper"
className="notifications-list-wrapper"
>
<div
className="notifications-list-wrapper"
className="notifications-list-header"
>
<div
className="notifications-list-header"
>
<h4>
{t('all-notifications')}
</h4>
<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"
className="notifications-list-action"
>
{(noitficationList.length !== 0) && (
noitficationList.map(item => {
return (
{(selectedFiles.size !== 0) && (
<button
className="btn btn-primary"
onClick={() => {
clearHandler();
}}
>
{t('deselect')}
</button>
)}
<button
className="btn btn-primary"
onClick={() => {
selectAllHandler();
}}
>
{t('select-all')}
</button>
</div>
</div>
<div
className="notifications-list-body"
>
{(noitficationList.length !== 0) && (
noitficationList.map(item => {
return (
<div
className="notification-item"
key={item.id}
>
<div
className="notification-item"
className="notification-check"
>
<button
onClick={() => {
selectHandler(item.id);
}}
>
{selectedFiles.has(item.id) && (
<IconCheck />
)}
</button>
</div>
<div
className="notification-body"
>
<div
className="notification-check"
className="notification-header"
>
<button
onClick={() => {
selectHandler(item.id);
}}
<div
className="notification-title"
>
{selectedFiles.has(item.id) && (
<IconCheck />
)}
</button>
{item.title}
</div>
<div
className="notification-status"
>
{item.status}
</div>
</div>
<div
className="notification-text"
>
{item.notificationText}
</div>
<div
className="notification-footer"
>
<div
className="notification-date"
>
{item.data}
</div>
<button
className="btn btn-remove"
>
{t('remove')}
</button>
</div>
</div>
)
})
)}
</div>
</div>
)
})
)}
</div>
</div>
)