Files
B.Tech-Project-III/thirdeye/dashboard/app/logs/EventDetails.tsx
2026-04-05 00:43:23 +05:30

39 lines
2.5 KiB
TypeScript

import React from 'react';
export default function EventDetails() {
return (
<div className="fixed right-6 bottom-32 w-80 z-40 animate-fade-in-right delay-200" style={{ right: '24px', bottom: '128px' }}>
<div className="glass neon-border rounded-xl shadow-2xl flex flex-col bg-black/80 backdrop-blur-2xl border-white/10 overflow-hidden card-interactive">
<div className="p-4 flex justify-between items-center border-b border-white/5 bg-white/5 relative">
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#a88cfb]/50 to-transparent"></div>
<h3 className="text-[10px] uppercase font-mono-data tracking-widest text-violet-400">Selected Event Details</h3>
<button className="text-zinc-500 hover:text-white transition-colors cursor-pointer material-symbols-outlined text-sm">close</button>
</div>
<div className="p-4 space-y-4">
<div className="bg-black/40 rounded-lg p-3 border border-white/5 shadow-inner">
<p className="text-[8px] font-mono-data text-zinc-500 uppercase mb-1">Raw Signature</p>
<p className="text-[10px] font-mono-data break-all text-[#a88cfb] opacity-90">SHA256: 8a7f11c2a10be...b9921e2a10bf</p>
</div>
<div className="bg-black/40 rounded-lg p-3 border border-white/5 shadow-inner flex justify-between items-center">
<p className="text-[8px] font-mono-data text-zinc-500 uppercase">Geolocation</p>
<div className="text-right">
<span className="text-[10px] font-mono-data text-white block">Moscow, RU</span>
<span className="text-[9px] font-mono-data font-bold italic text-[#00daf3]">PROXIED</span>
</div>
</div>
</div>
<div className="p-3 border-t border-white/5 bg-white/[0.02] flex gap-2">
<button className="flex-1 bg-violet-500/20 text-violet-400 hover:bg-violet-500 hover:text-white border border-violet-500/50 py-2.5 rounded-lg text-[10px] font-bold tracking-[0.2em] transition-all uppercase btn-interactive shadow-[0_0_10px_rgba(167,139,250,0.1)] focus:ring-2 focus:ring-violet-500/50">
Trace Route
</button>
<button className="px-3 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white border border-white/10 rounded-lg transition-all flex items-center justify-center btn-interactive">
<span className="material-symbols-outlined text-[14px]">share</span>
</button>
</div>
</div>
</div>
);
}