File size: 4,448 Bytes
78d0e31 |
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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Activity, Shield, Heart, Clock } from "lucide-react"
// Mock data for activity feed
const INITIAL_ACTIVITIES: any[] = []
// Helper function to get badge color based on activity type
const getActivityColor = (type: string) => {
switch (type) {
case "verification":
return "bg-guardian/20 text-guardian hover:bg-guardian/30"
case "donation":
return "bg-pulse/20 text-pulse hover:bg-pulse/30"
case "registration":
return "bg-flame/20 text-flame hover:bg-flame/30"
case "achievement":
return "bg-neon/20 text-neon hover:bg-neon/30"
default:
return "bg-gray-500/20 text-gray-400 hover:bg-gray-500/30"
}
}
export function PulseActivity() {
const [activities, setActivities] = useState(INITIAL_ACTIVITIES)
const [filter, setFilter] = useState("all")
// Simulate real-time updates
useEffect(() => {
// In a real implementation, this would connect to a WebSocket or polling API
// For now, we'll leave it empty to allow manual data entry
return () => {} // Empty cleanup function
}, [])
// Filter activities
const filteredActivities = filter === "all" ? activities : activities.filter((activity) => activity.type === filter)
return (
<Card className="bg-ash-gray/30 border border-gray-700">
<CardHeader className="pb-2">
<div className="flex justify-between items-center">
<CardTitle className="text-xl font-heading flex items-center">
<Activity className="h-5 w-5 mr-2 text-neon" />
Live Activity Feed
</CardTitle>
<div className="flex gap-1">
<Badge
className={`cursor-pointer ${filter === "all" ? "bg-neon text-black" : "bg-gray-800 text-gray-400"}`}
onClick={() => setFilter("all")}
>
All
</Badge>
<Badge
className={`cursor-pointer ${filter === "verification" ? "bg-guardian text-black" : "bg-gray-800 text-gray-400"}`}
onClick={() => setFilter("verification")}
>
<Shield className="h-3 w-3 mr-1" /> Verifications
</Badge>
<Badge
className={`cursor-pointer ${filter === "donation" ? "bg-pulse text-white" : "bg-gray-800 text-gray-400"}`}
onClick={() => setFilter("donation")}
>
<Heart className="h-3 w-3 mr-1" /> Donations
</Badge>
</div>
</div>
</CardHeader>
<CardContent>
<div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
{filteredActivities.map((activity) => (
<div
key={activity.id}
className="flex items-start gap-3 p-3 rounded-md bg-black/20 hover:bg-black/30 transition-colors"
>
<div className={`p-2 rounded-full bg-gray-800 ${activity.color}`}>
<activity.icon className="h-4 w-4" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-medium text-white">{activity.user}</span>
<span className="text-gray-400">{activity.action}</span>
<span className="font-medium text-white">{activity.target}</span>
</div>
<div className="flex items-center text-xs text-gray-500 mt-1">
<Clock className="h-3 w-3 mr-1" />
<span>{activity.time}</span>
<span className="mx-1">•</span>
<span>{activity.location}</span>
</div>
</div>
<Badge className={getActivityColor(activity.type)}>{activity.type}</Badge>
</div>
))}
{filteredActivities.length === 0 && (
<div className="text-center py-12 bg-dusk rounded-lg">
<Activity className="h-16 w-16 mx-auto mb-4 text-gray-500 opacity-50" />
<h3 className="text-xl font-heading mb-2 text-white">No Activity Yet</h3>
<p className="text-gray-400">Activities will appear here as users interact with the platform.</p>
</div>
)}
</div>
</CardContent>
</Card>
)
}
|