7e4bcbdb65
Replace remaining legacy semantic color tokens: - text-kodo-red → text-destructive (36 files, 50 instances): errors, deletions, validation, destructive actions - text-kodo-lime → text-success (36 files, 48 instances): success states, confirmations, positive indicators These tokens now adapt to theme changes instead of being hardcoded. Co-authored-by: Cursor <cursoragent@cursor.com>
94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Heart,
|
|
UserPlus,
|
|
MessageSquare,
|
|
DollarSign,
|
|
Info,
|
|
ShieldAlert,
|
|
Circle,
|
|
} from 'lucide-react';
|
|
import { Notification } from '../../types';
|
|
import { Button } from '../ui/button';
|
|
|
|
interface NotificationItemProps {
|
|
notification: Notification;
|
|
onRead: (id: string) => void;
|
|
onAction?: (notification: Notification) => void;
|
|
}
|
|
|
|
export const NotificationItem: React.FC<NotificationItemProps> = ({
|
|
notification,
|
|
onRead,
|
|
onAction,
|
|
}) => {
|
|
const getIcon = () => {
|
|
switch (notification.type) {
|
|
case 'like':
|
|
return <Heart className="w-4 h-4 text-kodo-magenta fill-current" />;
|
|
case 'follow':
|
|
return <UserPlus className="w-4 h-4 text-kodo-steel" />;
|
|
case 'mention':
|
|
return <MessageSquare className="w-4 h-4 text-kodo-gold" />;
|
|
case 'sale':
|
|
return <DollarSign className="w-4 h-4 text-success" />;
|
|
case 'security':
|
|
return <ShieldAlert className="w-4 h-4 text-destructive" />;
|
|
default:
|
|
return <Info className="w-4 h-4 text-muted-foreground" />;
|
|
}
|
|
};
|
|
|
|
const getBgColor = () => {
|
|
if (notification.read) return 'bg-transparent';
|
|
switch (notification.type) {
|
|
case 'sale':
|
|
return 'bg-kodo-lime/5 border-l-2 border-l-kodo-lime';
|
|
case 'security':
|
|
return 'bg-kodo-red/5 border-l-2 border-l-kodo-red';
|
|
default:
|
|
return 'bg-kodo-cyan/5 border-l-2 border-l-kodo-cyan';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`p-4 rounded-lg flex items-start gap-4 transition-all hover:bg-white/5 group border border-transparent ${getBgColor()}`}
|
|
>
|
|
<div className="flex-shrink-0 mt-1 p-2 bg-kodo-graphite rounded-full border border-border shadow-sm">
|
|
{getIcon()}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm text-kodo-text-main leading-relaxed">
|
|
{notification.message}
|
|
</p>
|
|
<span className="text-xs text-muted-foreground font-mono mt-1 block">
|
|
{notification.timestamp}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
{!notification.read && (
|
|
<button
|
|
onClick={() => onRead(notification.id)}
|
|
className="p-1.5 hover:bg-white/10 rounded-full text-kodo-steel"
|
|
title="Mark as read"
|
|
>
|
|
<Circle className="w-3 h-3 fill-current" />
|
|
</button>
|
|
)}
|
|
{notification.actionUrl && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs"
|
|
onClick={() => onAction && onAction(notification)}
|
|
>
|
|
View
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|