34 lines
1 KiB
TypeScript
34 lines
1 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function ViewerCount() {
|
|
const [viewerCount, setViewerCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
// Simulate viewer count updates
|
|
// In a real app, this would connect to a WebSocket or API
|
|
const updateViewers = () => {
|
|
const baseCount = 42;
|
|
const variance = Math.floor(Math.random() * 10);
|
|
setViewerCount(baseCount + variance);
|
|
};
|
|
|
|
updateViewers();
|
|
const interval = setInterval(updateViewers, 5000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 bg-black/50 backdrop-blur-sm border border-cyan-500/30 rounded-lg px-4 py-2">
|
|
<div className="relative">
|
|
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
|
|
<div className="absolute inset-0 w-2 h-2 bg-red-500 rounded-full animate-ping"></div>
|
|
</div>
|
|
<span className="text-cyan-400 font-mono text-sm font-medium">
|
|
{viewerCount.toLocaleString()} watching
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|