Blizzard
84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Radio, Zap } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export const StudioHeader: React.FC = () => {
|
|
const [time, setTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => setTime(new Date()), 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const formatTime = (date: Date) => {
|
|
return date.toLocaleTimeString('en-US', {
|
|
hour12: false,
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="radio-rack w-full py-6 px-8 rounded-xl flex flex-col md:flex-row items-center justify-between gap-6 overflow-hidden">
|
|
{/* Brand & Status */}
|
|
<div className="flex items-center gap-6">
|
|
<div className="relative">
|
|
<div className="w-16 h-16 rounded-full bg-studio-inset border border-studio-edge flex items-center justify-center shadow-lg">
|
|
<Radio className="w-8 h-8 glow-amber" />
|
|
</div>
|
|
<motion.div
|
|
animate={{ opacity: [1, 0.5, 1] }}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-studio-glow-red border-2 border-studio-panel shadow-[0_0_10px_var(--studio-glow-red)]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<h1 className="text-3xl font-black tracking-tighter text-white font-mono uppercase">
|
|
Morning <span className="glow-amber">Radio</span>
|
|
</h1>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">Broadcast Studio 01</span>
|
|
<div className="h-1 w-1 rounded-full bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Display: Time & On Air */}
|
|
<div className="flex items-center gap-8 studio-inset py-3 px-10">
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Local Time</span>
|
|
<span className="text-3xl font-mono font-black glow-green tracking-widest">
|
|
{formatTime(time)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="h-10 w-px bg-studio-edge" />
|
|
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Status</span>
|
|
<div className="px-4 py-1 rounded bg-studio-glow-red/10 border border-studio-glow-red/30">
|
|
<span className="text-sm font-black text-studio-glow-red uppercase tracking-widest animate-pulse">On Air</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metrics Mini-Readout */}
|
|
<div className="hidden xl:flex items-center gap-6">
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-widest opacity-50">Signal Strength</span>
|
|
<div className="flex gap-1 mt-1">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<div key={i} className={`w-1.5 h-4 rounded-full ${i <= 4 ? 'bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]' : 'bg-studio-edge'}`} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-studio-inset border border-studio-edge">
|
|
<Zap className="w-5 h-5 text-amber-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|