website refactor
This commit is contained in:
@@ -11,8 +11,11 @@ import {
|
||||
Users,
|
||||
Vote
|
||||
} from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
|
||||
const notificationIcons: Record<string, typeof Bell> = {
|
||||
protest_filed: AlertTriangle,
|
||||
@@ -37,10 +40,13 @@ const notificationColors: Record<string, string> = {
|
||||
import { useNotifications } from './NotificationProvider';
|
||||
import type { Notification } from './notificationTypes';
|
||||
|
||||
export default function NotificationCenter() {
|
||||
interface NotificationCenterProps {
|
||||
onNavigate?: (href: string) => void;
|
||||
}
|
||||
|
||||
export function NotificationCenter({ onNavigate }: NotificationCenterProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const router = useRouter();
|
||||
const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications();
|
||||
|
||||
// Close panel when clicking outside
|
||||
@@ -63,8 +69,8 @@ export default function NotificationCenter() {
|
||||
const handleNotificationClick = (notification: Notification) => {
|
||||
markAsRead(notification.id);
|
||||
|
||||
if (notification.actionUrl) {
|
||||
router.push(notification.actionUrl);
|
||||
if (notification.actionUrl && onNavigate) {
|
||||
onNavigate(notification.actionUrl);
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
@@ -86,126 +92,183 @@ export default function NotificationCenter() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={panelRef}>
|
||||
<Box position="relative" ref={panelRef}>
|
||||
{/* Bell button */}
|
||||
<button
|
||||
<Box
|
||||
as="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`
|
||||
relative p-2 rounded-lg transition-colors
|
||||
${isOpen
|
||||
? 'bg-primary-blue/10 text-primary-blue'
|
||||
: 'text-gray-400 hover:text-white hover:bg-iron-gray/50'
|
||||
}
|
||||
`}
|
||||
p={2}
|
||||
rounded="lg"
|
||||
transition
|
||||
bg={isOpen ? 'bg-primary-blue/10' : undefined}
|
||||
color={isOpen ? 'text-primary-blue' : 'text-gray-400'}
|
||||
hoverBg={!isOpen ? 'bg-iron-gray/50' : undefined}
|
||||
hoverTextColor={!isOpen ? 'text-white' : undefined}
|
||||
position="relative"
|
||||
>
|
||||
<Bell className="w-5 h-5" />
|
||||
<Icon icon={Bell} size={5} />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold bg-red-500 text-white rounded-full">
|
||||
<Box
|
||||
position="absolute"
|
||||
top="-0.5"
|
||||
right="-0.5"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
minWidth="18px"
|
||||
height="18px"
|
||||
px={1}
|
||||
bg="bg-red-500"
|
||||
color="text-white"
|
||||
rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px', fontWeight: 'bold' }}
|
||||
>
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
</button>
|
||||
</Box>
|
||||
|
||||
{/* Notification panel */}
|
||||
{isOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 w-96 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden z-50">
|
||||
<Box
|
||||
position="absolute"
|
||||
right="0"
|
||||
top="full"
|
||||
mt={2}
|
||||
w="96"
|
||||
bg="bg-deep-graphite"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="xl"
|
||||
shadow="2xl"
|
||||
overflow="hidden"
|
||||
zIndex={50}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="w-4 h-4 text-primary-blue" />
|
||||
<span className="font-semibold text-white">Notifications</span>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" px={4} py={3} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Icon icon={Bell} size={4} color="text-primary-blue" />
|
||||
<Text weight="semibold" color="text-white">Notifications</Text>
|
||||
{unreadCount > 0 && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-red-500/20 text-red-400 rounded-full">
|
||||
{unreadCount} new
|
||||
</span>
|
||||
<Box px={2} py={0.5} bg="bg-red-500/20" rounded="full">
|
||||
<Text size="xs" weight="medium" color="text-red-400">
|
||||
{unreadCount} new
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
{unreadCount > 0 && (
|
||||
<button
|
||||
<Box
|
||||
as="button"
|
||||
onClick={markAllAsRead}
|
||||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
cursor="pointer"
|
||||
transition
|
||||
hoverTextColor="text-white"
|
||||
>
|
||||
<CheckCheck className="w-3.5 h-3.5" />
|
||||
Mark all read
|
||||
</button>
|
||||
<Icon icon={CheckCheck} size={3.5} color="text-gray-400" />
|
||||
<Text size="xs" color="text-gray-400">Mark all read</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Notifications list */}
|
||||
<div className="max-h-[400px] overflow-y-auto">
|
||||
<Box maxHeight="400px" overflow="auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 rounded-full bg-iron-gray/50 flex items-center justify-center">
|
||||
<Bell className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">No notifications yet</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
You'll be notified about protests, races, and more
|
||||
</p>
|
||||
</div>
|
||||
<Box py={12} textAlign="center">
|
||||
<Box w="12" h="12" mx="auto" mb={3} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
|
||||
<Icon icon={Bell} size={6} color="text-gray-500" />
|
||||
</Box>
|
||||
<Text size="sm" color="text-gray-400" block>No notifications yet</Text>
|
||||
<Text size="xs" color="text-gray-500" block mt={1}>
|
||||
You'll be notified about protests, races, and more
|
||||
</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
<Stack gap={0}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="divide-y divide-charcoal-outline/50"
|
||||
>
|
||||
{notifications.map((notification) => {
|
||||
const Icon = notificationIcons[notification.type] || Bell;
|
||||
const NotificationIcon = notificationIcons[notification.type] || Bell;
|
||||
const colorClass = notificationColors[notification.type] || 'text-gray-400 bg-gray-400/10';
|
||||
|
||||
return (
|
||||
<button
|
||||
<Box
|
||||
key={notification.id}
|
||||
as="button"
|
||||
onClick={() => handleNotificationClick(notification)}
|
||||
className={`
|
||||
w-full text-left px-4 py-3 transition-colors hover:bg-iron-gray/30
|
||||
${!notification.read ? 'bg-primary-blue/5' : ''}
|
||||
`}
|
||||
w="full"
|
||||
textAlign="left"
|
||||
px={4}
|
||||
py={3}
|
||||
transition
|
||||
hoverBg="bg-iron-gray/30"
|
||||
bg={!notification.read ? 'bg-primary-blue/5' : undefined}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<div className={`p-2 rounded-lg flex-shrink-0 ${colorClass}`}>
|
||||
<Icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className={`text-sm font-medium truncate ${
|
||||
!notification.read ? 'text-white' : 'text-gray-300'
|
||||
}`}>
|
||||
<Box display="flex" gap={3}>
|
||||
<Box p={2} rounded="lg" flexShrink={0}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={colorClass}
|
||||
>
|
||||
<Icon icon={NotificationIcon} size={4} />
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box display="flex" alignItems="start" justifyContent="between" gap={2}>
|
||||
<Text size="sm" weight="medium" truncate color={!notification.read ? 'text-white' : 'text-gray-300'} block>
|
||||
{notification.title}
|
||||
</p>
|
||||
</Text>
|
||||
{!notification.read && (
|
||||
<span className="w-2 h-2 bg-primary-blue rounded-full flex-shrink-0 mt-1.5" />
|
||||
<Box w="2" h="2" bg="bg-primary-blue" rounded="full" flexShrink={0} mt={1.5} />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 line-clamp-2 mt-0.5">
|
||||
</Box>
|
||||
<Text size="xs" color="text-gray-500" lineClamp={2} mt={0.5} block>
|
||||
{notification.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<span className="text-[10px] text-gray-600">
|
||||
</Text>
|
||||
<Box display="flex" alignItems="center" gap={2} mt={1.5}>
|
||||
<Text color="text-gray-600"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
{formatTime(notification.createdAt)}
|
||||
</span>
|
||||
</Text>
|
||||
{notification.actionUrl && (
|
||||
<span className="flex items-center gap-0.5 text-[10px] text-primary-blue">
|
||||
<ExternalLink className="w-2.5 h-2.5" />
|
||||
View
|
||||
</span>
|
||||
<Box display="flex" alignItems="center" gap={0.5}>
|
||||
<Icon icon={ExternalLink} size={2.5} color="text-primary-blue" />
|
||||
<Text color="text-primary-blue"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
View
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Footer */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="px-4 py-2 border-t border-charcoal-outline bg-iron-gray/20">
|
||||
<p className="text-[10px] text-gray-500 text-center">
|
||||
<Box px={4} py={2} borderTop borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
|
||||
<Text color="text-gray-500" textAlign="center" block
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
Showing {notifications.length} notification{notifications.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user