7e60cbfff9
- Add Plus Jakarta Sans as display font for headings - Add subtle noise texture overlay + indigo radial gradient for depth - New keyframe animations: glow-pulse, fade-in-up, scale-in, slide-in-right - Card: interactive hover-lift + selected ring variants - Button: scale micro-interactions, destructive glow, transition-all - Header: logo upgrade with wordmark, animated nav indicator bar, glass search button, gradient shadow depth - StatusDot: glow halos per status variant (active/success/error/warning/urgent) - HealthDot: glow effects for connected/disconnected/reconnecting states - Card hover-lift and status glow CSS utilities
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
import type { ConnectionState } from "@/hooks/useConnectionStatus";
|
|
|
|
interface HealthDotProps {
|
|
connectionState: ConnectionState;
|
|
}
|
|
|
|
const healthGlow: Record<ConnectionState, string> = {
|
|
connected: "0 0 6px 1px hsl(var(--status-success-dot) / 0.4)",
|
|
disconnected: "0 0 6px 1px hsl(var(--status-error-dot) / 0.5)",
|
|
reconnecting: "0 0 6px 1px hsl(var(--status-neutral-dot) / 0.3)",
|
|
};
|
|
|
|
export function HealthDot({ connectionState }: HealthDotProps) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span
|
|
className={cn(
|
|
"inline-block h-2 w-2 rounded-full",
|
|
connectionState === "reconnecting" && "bg-status-neutral-dot animate-status-pulse",
|
|
connectionState === "connected" && "bg-status-success-dot",
|
|
connectionState === "disconnected" && "bg-status-error-dot",
|
|
)}
|
|
style={{ boxShadow: healthGlow[connectionState] }}
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{connectionState === "reconnecting"
|
|
? "Reconnecting..."
|
|
: connectionState === "connected"
|
|
? "Server connected"
|
|
: "Server disconnected"}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|