73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
interface Track {
|
|
title: string;
|
|
artist: string;
|
|
album?: string;
|
|
}
|
|
|
|
export default function NowPlaying() {
|
|
const [currentTrack, setCurrentTrack] = useState<Track>({
|
|
title: 'AeThex Live Stream',
|
|
artist: 'AeThex LABS',
|
|
album: 'Live Broadcast',
|
|
});
|
|
|
|
useEffect(() => {
|
|
// Simulate track updates
|
|
// In a real app, this would fetch from an API
|
|
const tracks: Track[] = [
|
|
{ title: 'AeThex Live Stream', artist: 'AeThex LABS', album: 'Live Broadcast' },
|
|
{ title: 'Cybernetic Dreams', artist: 'AeThex LABS', album: 'Digital Futures' },
|
|
{ title: 'Neural Network', artist: 'AeThex LABS', album: 'AI Symphony' },
|
|
];
|
|
|
|
let index = 0;
|
|
const interval = setInterval(() => {
|
|
index = (index + 1) % tracks.length;
|
|
setCurrentTrack(tracks[index]);
|
|
}, 30000); // Change every 30 seconds
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-black/50 backdrop-blur-sm border border-cyan-500/30 rounded-lg p-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center">
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-cyan-400/60 text-xs font-mono uppercase tracking-wider mb-1">
|
|
Now Playing
|
|
</p>
|
|
<h3 className="text-white font-semibold text-sm truncate">
|
|
{currentTrack.title}
|
|
</h3>
|
|
<p className="text-cyan-400/80 text-xs truncate">
|
|
{currentTrack.artist}
|
|
</p>
|
|
{currentTrack.album && (
|
|
<p className="text-cyan-400/60 text-xs truncate">
|
|
{currentTrack.album}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|