68 lines
3.4 KiB
TypeScript
68 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { useSocket } from "../hooks/use-socket";
|
|
import { Badge } from "../components/ui/badge";
|
|
|
|
export function Dashboard() {
|
|
const { isConnected, stats } = useSocket();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
|
|
<div className="flex items-center gap-3">
|
|
{/* Bot Avatar */}
|
|
{stats?.bot?.avatarUrl ? (
|
|
<img
|
|
src={stats.bot.avatarUrl}
|
|
alt="Aurora Avatar"
|
|
className="w-8 h-8 rounded-full border border-primary/20 shadow-sm object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
|
|
)}
|
|
|
|
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
|
|
|
{/* Live Status Badge */}
|
|
<div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border transition-colors duration-500 ${isConnected
|
|
? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500"
|
|
: "bg-red-500/10 border-red-500/20 text-red-500"
|
|
}`}>
|
|
<div className="relative flex h-2 w-2">
|
|
{isConnected && (
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
|
|
)}
|
|
<span className={`relative inline-flex rounded-full h-2 w-2 ${isConnected ? "bg-emerald-500" : "bg-red-500"}`}></span>
|
|
</div>
|
|
<span className="text-[10px] font-bold tracking-wider uppercase">
|
|
{isConnected ? "Live" : "Offline"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
Home
|
|
</Link>
|
|
<Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
|
Design System
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Content Placeholder */}
|
|
<main className="pt-32 px-8 max-w-7xl mx-auto">
|
|
<div className="glass-card p-6 rounded-lg border border-border/50">
|
|
<h1 className="text-2xl font-bold text-primary mb-2">Dashboard Overview</h1>
|
|
<p className="text-muted-foreground">
|
|
Real-time connection status: <span className={isConnected ? "text-emerald-500 font-medium" : "text-red-500 font-medium"}>
|
|
{isConnected ? "Connected" : "Disconnected"}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|