47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { Signal, Clock, Gauge } from 'lucide-react'
|
|
|
|
interface ConnectionStatusProps {
|
|
quality: 'high' | 'medium' | 'low'
|
|
}
|
|
|
|
export function ConnectionStatus({ quality }: ConnectionStatusProps) {
|
|
const [stats, setStats] = useState({
|
|
latency: 45,
|
|
fps: 60,
|
|
bitrate: 8.5,
|
|
})
|
|
|
|
// Simulate varying connection stats
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setStats({
|
|
latency: Math.floor(35 + Math.random() * 20),
|
|
fps: quality === 'high' ? 60 : quality === 'medium' ? 30 : 15,
|
|
bitrate: quality === 'high' ? 8 + Math.random() * 2 : quality === 'medium' ? 4 + Math.random() : 1 + Math.random() * 0.5,
|
|
})
|
|
}, 1000)
|
|
|
|
return () => clearInterval(interval)
|
|
}, [quality])
|
|
|
|
return (
|
|
<div className="flex items-center justify-center gap-6 h-8 bg-card/80 backdrop-blur border-t border-border/50 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-1.5">
|
|
<Clock className="h-3 w-3" />
|
|
<span>{stats.latency}ms</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Gauge className="h-3 w-3" />
|
|
<span>{stats.fps} FPS</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Signal className="h-3 w-3" />
|
|
<span>{stats.bitrate.toFixed(1)} Mbps</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|