All files / laravel-saas/resources/js/Components NotificationItem.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { router } from '@inertiajs/react';
import { Button } from '@/Components/ui/Button';
import { Badge } from '@/Components/ui/Badge';
import { ExternalLink } from 'lucide-react';
 
interface Notification {
  id: number;
  title: string;
  message: string;
  action_url: string | null;
  is_read: boolean;
  created_at_human: string;
}
 
interface NotificationItemProps {
  notification: Notification;
  onMarkAsRead?: (notification: Notification) => void;
  compact?: boolean;
}
 
export function NotificationItem({ 
  notification, 
  onMarkAsRead, 
  compact = false 
}: NotificationItemProps) {
  const handleClick = () => {
    // Mark as read when clicked
    if (!notification.is_read && onMarkAsRead) {
      onMarkAsRead(notification);
    }
 
    // Navigate to action URL if provided
    if (notification.action_url) {
      router.visit(notification.action_url);
    }
  };
 
  return (
    <div
      className={`
        group relative p-4 border rounded-lg transition-colors cursor-pointer
        ${notification.is_read 
          ? 'bg-background border-border hover:bg-muted/50' 
          : 'bg-muted/30 border-primary/20 hover:bg-muted/50'
        }
        ${compact ? 'p-3' : 'p-4'}
      `}
      onClick={handleClick}
    >
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <h4 className={`
              text-sm font-medium truncate
              ${notification.is_read ? 'text-muted-foreground' : 'text-foreground'}
            `}>
              {notification.title}
            </h4>
            {!notification.is_read && (
              <Badge variant="secondary" className="h-2 w-2 p-0 rounded-full bg-primary" />
            )}
          </div>
          <p className={`
            text-sm leading-relaxed
            ${compact ? 'line-clamp-1' : 'line-clamp-2'}
            ${notification.is_read ? 'text-muted-foreground' : 'text-foreground/80'}
          `}>
            {notification.message}
          </p>
          <p className="text-xs text-muted-foreground mt-2">
            {notification.created_at_human}
          </p>
        </div>
        
        {notification.action_url && (
          <div className="ml-3 flex-shrink-0">
            <ExternalLink className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
          </div>
        )}
      </div>
    </div>
  );
}