File size: 2,780 Bytes
adea8c3 5482b12 adea8c3 3fc3cc7 adea8c3 3fc3cc7 adea8c3 3fc3cc7 adea8c3 3fc3cc7 adea8c3 | 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 | import React from "react";
import { Zap, Trash2 } from "lucide-react";
import { useEventStore } from "../stores/eventStore";
import EventRow from "./EventRow";
const EventFeed: React.FC = () => {
const { events, clear, connected } = useEventStore();
return (
<div
className="glass-panel overflow-hidden flex flex-col h-[600px] rounded-3xl"
>
{/* Header */}
<div
className="px-7 py-5 flex items-center justify-between"
style={{ borderBottom: "1px solid var(--color-border)" }}
>
<div className="flex items-center gap-3">
<div className={`p-2 rounded-xl transition-all duration-300 ${connected ? "bg-amber-50 shadow-sm" : "bg-zinc-50"}`}>
<Zap className={`w-5 h-5 ${connected ? "text-amber-600" : "text-zinc-400"}`} />
</div>
<h2 className="text-lg font-extrabold tracking-tight" style={{ color: "var(--color-heading)" }}>
Live Feed
</h2>
</div>
<button
onClick={clear}
className="p-2.5 hover:bg-zinc-100 rounded-xl transition-colors"
style={{ color: "var(--color-muted)" }}
title="Clear Feed"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-auto p-5 space-y-3">
{!connected && (
<div className="flex flex-col items-center justify-center h-full space-y-4 text-center">
<div className="p-5 bg-zinc-50 rounded-2xl border border-zinc-100 shadow-sm">
<Zap className="w-10 h-10 text-zinc-300 animate-pulse" />
</div>
<p className="text-[11px] uppercase tracking-[0.15em] font-bold" style={{ color: "var(--color-muted)" }}>
Connecting to live stream...
</p>
</div>
)}
{connected && events.length === 0 && (
<div className="flex flex-col items-center justify-center h-full space-y-4 text-center">
<div className="p-5 bg-zinc-50 rounded-2xl border border-zinc-100 shadow-sm">
<Zap className="w-10 h-10 text-zinc-300" />
</div>
<div className="space-y-1.5">
<p className="text-[11px] font-bold uppercase tracking-[0.15em]" style={{ color: "var(--color-muted)" }}>
Monitoring activity
</p>
<p className="text-[11px] max-w-[180px] leading-relaxed" style={{ color: "var(--color-muted)" }}>
Evaluation events will appear here in real-time.
</p>
</div>
</div>
)}
{events.map((event, idx) => (
<EventRow key={idx} event={event} />
))}
</div>
</div>
);
};
export default EventFeed;
|