File size: 2,072 Bytes
84121fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React from 'react'
import { useAuth } from '../contexts/AuthContext'
import { useChannels } from '../contexts/ChannelContext'
import { Tv, Menu, LogOut, Users } from 'lucide-react'
interface HeaderProps {
onToggleChannelList: () => void
showChannelList: boolean
}
export default function Header({ onToggleChannelList, showChannelList }: HeaderProps) {
const { logout } = useAuth()
const { currentChannel, viewerCount } = useChannels()
return (
<header className="bg-gray-800 border-b border-gray-700 px-4 py-3">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<button
onClick={onToggleChannelList}
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
title={showChannelList ? 'Ocultar lista' : 'Mostrar lista'}
>
<Menu className="h-5 w-5 text-gray-300" />
</button>
<div className="flex items-center space-x-2">
<Tv className="h-6 w-6 text-primary-500" />
<h1 className="text-xl font-bold text-white">DaddyTV</h1>
</div>
</div>
<div className="flex items-center space-x-4">
{currentChannel && (
<div className="flex items-center space-x-4">
<div className="text-sm text-gray-300">
<span className="font-medium">{currentChannel.name}</span>
</div>
{viewerCount > 1 && (
<div className="flex items-center space-x-1 text-sm text-gray-400">
<Users className="h-4 w-4" />
<span>{viewerCount}</span>
</div>
)}
</div>
)}
<button
onClick={logout}
className="p-2 hover:bg-gray-700 rounded-lg transition-colors text-gray-300 hover:text-white"
title="Cerrar sesión"
>
<LogOut className="h-5 w-5" />
</button>
</div>
</div>
</header>
)
} |