done pages
This commit is contained in:
meena committed
1 parent
05f30375d7
commit
a0ecee38b1
15 files changed
+1263
-242
No files matched your search
@@ -0,0 +1,227 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Tabs, Tab, IconButton, Menu, MenuItem } from '@mui/material';
|
||||
import { MoreVert, Delete } from '@mui/icons-material';
|
||||
|
||||
const NotificationPage = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [selectedNotification, setSelectedNotification] = useState(null);
|
||||
|
||||
const [notifications, setNotifications] = useState([
|
||||
{
|
||||
id: 1,
|
||||
type: 'message',
|
||||
user: 'Thangavel',
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
message: 'has sent you a message',
|
||||
time: '1d',
|
||||
action: 'View message',
|
||||
category: 'all'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'profile',
|
||||
user: 'Thangavel',
|
||||
avatar: 'https://i.pravatar.cc/150?img=2',
|
||||
message: 'and 3 others have viewed your profile',
|
||||
time: '1d',
|
||||
action: 'See who viewed',
|
||||
category: 'interactions'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'interest',
|
||||
user: 'Parthiban',
|
||||
avatar: 'https://i.pravatar.cc/150?img=3',
|
||||
message: 'has sent you an interest',
|
||||
time: '1d',
|
||||
action: 'View interest',
|
||||
category: 'urgent'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: 'message',
|
||||
user: 'Rajesh',
|
||||
avatar: 'https://i.pravatar.cc/150?img=4',
|
||||
message: 'replied to your message',
|
||||
time: '2d',
|
||||
action: 'View message',
|
||||
category: 'all'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 'profile',
|
||||
user: 'Priya',
|
||||
avatar: 'https://i.pravatar.cc/150?img=5',
|
||||
message: 'viewed your profile',
|
||||
time: '2d',
|
||||
action: 'See profile',
|
||||
category: 'interactions'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
type: 'interest',
|
||||
user: 'Kumar',
|
||||
avatar: 'https://i.pravatar.cc/150?img=6',
|
||||
message: 'accepted your interest',
|
||||
time: '3d',
|
||||
action: 'View profile',
|
||||
category: 'urgent'
|
||||
}
|
||||
]);
|
||||
|
||||
const handleTabChange = (event, newValue) => {
|
||||
setActiveTab(newValue);
|
||||
};
|
||||
|
||||
const handleMenuOpen = (event, notificationId) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
setSelectedNotification(notificationId);
|
||||
};
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
setSelectedNotification(null);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
setNotifications(notifications.filter(n => n.id !== selectedNotification));
|
||||
handleMenuClose();
|
||||
};
|
||||
|
||||
const getFilteredNotifications = () => {
|
||||
if (activeTab === 0) return notifications;
|
||||
if (activeTab === 1) return notifications.filter(n => n.category === 'interactions');
|
||||
if (activeTab === 2) return notifications.filter(n => n.category === 'urgent');
|
||||
return notifications;
|
||||
};
|
||||
|
||||
const filteredNotifications = getFilteredNotifications();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen my-10">
|
||||
<div className="max-w-[1200px] mx-auto ">
|
||||
{/* Header */}
|
||||
<div className="px-2 py-6 ">
|
||||
<h1 className="text-2xl text-center font-semibold text-gray-900">Notifications</h1>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="max-w-[350px] w-full mx-auto " >
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
sx={{
|
||||
'& .MuiTab-root': {
|
||||
textTransform: 'none',
|
||||
fontSize: '15px',
|
||||
fontWeight: 500,
|
||||
minWidth: 'auto',
|
||||
px: 3,
|
||||
border:"1px solid #074201ff ",
|
||||
display:"flex",
|
||||
gap:"10px",
|
||||
flexWrap:"wrap",
|
||||
},
|
||||
'& .Mui-selected': {
|
||||
color: '#fcfcfcff !important',
|
||||
backgroundColor: '#074201ff',
|
||||
},
|
||||
'& .MuiTabs-indicator': {
|
||||
backgroundColor: '#074201ff',
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab label="All" />
|
||||
<Tab label="Interactions" sx={{marginLeft:"10px"}} />
|
||||
<Tab label="Urgent" sx={{marginLeft:"10px"}}/>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* Notification List */}
|
||||
<div className="">
|
||||
{filteredNotifications.length === 0 ? (
|
||||
<div className="px-4 py-12 text-center text-gray-500">
|
||||
No notifications found
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="px-4 py-3 bg-[#edfffa] my-10">
|
||||
<h2 className="text-[18px] font-semibold text-gray-700">Yesterday</h2>
|
||||
</div>
|
||||
{filteredNotifications.map((notification) => (
|
||||
<div
|
||||
key={notification.id}
|
||||
className="px-4 py-4 hover:bg-gray-50 transition-colors bg-[#fff5ed] border-b border-[#A70710]"
|
||||
>
|
||||
<div className="flex items-start gap-3 ">
|
||||
{/* Avatar */}
|
||||
<img
|
||||
src={notification.avatar}
|
||||
alt={notification.user}
|
||||
className="w-12 h-12 rounded-full object-cover flex-shrink-0"
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-gray-900">
|
||||
<span className="font-semibold">{notification.user}</span>{' '}
|
||||
<span className="text-gray-700">{notification.message}</span>
|
||||
</p>
|
||||
<button className="mt-2 px-4 py-1.5 text-sm font-medium text-[#A70710] border-1 border-[#A70710] rounded-full hover:bg-[#A70710] hover:text-[#fff] transition-colors">
|
||||
{notification.action}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Time and Menu */}
|
||||
<div className="flex items-start gap-2 flex-shrink-0">
|
||||
<span className="text-xs text-gray-500 mt-1">{notification.time}</span>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) => handleMenuOpen(e, notification.id)}
|
||||
sx={{
|
||||
color: '#6b7280',
|
||||
'&:hover': { backgroundColor: '#f3f4f6' }
|
||||
}}
|
||||
>
|
||||
<MoreVert fontSize="small" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Delete Menu */}
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={handleDelete}
|
||||
sx={{
|
||||
color: '#ef4444',
|
||||
'&:hover': { backgroundColor: '#fee2e2' }
|
||||
}}
|
||||
>
|
||||
<Delete fontSize="small" sx={{ mr: 1 }} />
|
||||
Delete
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationPage;
|
||||
Reference in new issue
Block a user