201 lines
8.5 KiB
TypeScript
201 lines
8.5 KiB
TypeScript
import React from 'react'
|
|
// Inline SVG icons (kept minimal for clarity)
|
|
const IconChat = ({ size = 20 }: { size?: number }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)
|
|
|
|
const IconInfo = ({ size = 20 }: { size?: number }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth={1.5} />
|
|
<path d="M12 8v.01M11 12h1v4h1" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)
|
|
|
|
const IconClock = ({ size = 20 }: { size?: number }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth={1.5} />
|
|
<path d="M12 7v6l4 2" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)
|
|
|
|
const IconUsers = ({ size = 20 }: { size?: number }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
|
|
<circle cx="12" cy="7" r="4" stroke="currentColor" strokeWidth={1.5} />
|
|
</svg>
|
|
)
|
|
import { useAssets } from '../../hooks/useAssets'
|
|
import { usePeople } from '../../hooks/usePeople'
|
|
import { useStyle } from '../../hooks/useStyle'
|
|
import { useChat } from '../../hooks/useChat'
|
|
|
|
type SidebarItem = {
|
|
id: string
|
|
label: string
|
|
icon: React.ReactNode
|
|
}
|
|
|
|
type Props = {
|
|
activeTab: string | null
|
|
onSelectTab: (id: string | null) => void
|
|
}
|
|
|
|
const RightSidebar: React.FC<Props> = ({ activeTab, onSelectTab }) => {
|
|
const { assets } = useAssets()
|
|
const { people } = usePeople()
|
|
const { style, update } = useStyle()
|
|
const { messages, send } = useChat()
|
|
|
|
const items: SidebarItem[] = [
|
|
{ id: 'comments', label: 'Comentarios', icon: <IconChat /> },
|
|
{ id: 'style', label: 'Estilo', icon: <IconInfo /> },
|
|
{ id: 'banners', label: 'Banners', icon: <IconInfo /> },
|
|
{ id: 'media', label: 'Archivos multimedia', icon: <IconClock /> },
|
|
{ id: 'people', label: 'Personas', icon: <IconUsers /> },
|
|
{ id: 'private-chat', label: 'Chat privado', icon: <IconChat /> },
|
|
{ id: 'notes', label: 'Notas', icon: <IconUsers /> },
|
|
]
|
|
|
|
return (
|
|
<div className="fixed top-12 right-0 z-50 h-[calc(100vh-3rem)] pointer-events-none">
|
|
<div className="relative h-full flex items-stretch pointer-events-auto">
|
|
{/* Panel: positioned to the left of tabs and slides with transform */}
|
|
<div
|
|
role="region"
|
|
aria-hidden={!activeTab}
|
|
className="h-full bg-[#131418] text-gray-200 overflow-y-auto shadow-lg"
|
|
style={{
|
|
width: 320,
|
|
position: 'absolute',
|
|
right: '84.44px',
|
|
transform: activeTab ? 'translateX(0)' : 'translateX(120%)',
|
|
transition: 'transform 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease',
|
|
opacity: activeTab ? 1 : 0,
|
|
zIndex: 10, // below tabs (tabs will be z-20)
|
|
pointerEvents: activeTab ? 'auto' : 'none',
|
|
}}
|
|
>
|
|
<div className="p-4">
|
|
{activeTab ? (
|
|
<div>
|
|
{activeTab === 'media' && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-2">Archivos multimedia</h4>
|
|
<ul className="space-y-2">
|
|
{assets.map((a) => (
|
|
<li key={a.id} className="text-sm text-gray-300">{a.name}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'people' && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-2">Personas</h4>
|
|
<ul className="space-y-2">
|
|
{people.map((p) => (
|
|
<li key={p.id} className="text-sm text-gray-300">{p.name} <span className="text-xs text-gray-500">{p.role}</span></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'style' && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-2">Estilo</h4>
|
|
<div className="text-sm text-gray-300">Color primario: <span className="font-medium">{style.themeColor}</span></div>
|
|
<div className="mt-3">
|
|
<button
|
|
className="px-3 py-1 bg-blue-600 text-white rounded"
|
|
onClick={() => update({ showLogo: !style.showLogo })}
|
|
>
|
|
Alternar logo ({style.showLogo ? 'ON' : 'OFF'})
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'private-chat' && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-2">Chat privado</h4>
|
|
<div className="h-64 overflow-y-auto bg-[#0b0d0f] p-2 rounded">
|
|
{messages.map((m) => (
|
|
<div key={m.id} className="text-sm text-gray-300 mb-2">
|
|
<div className="font-medium text-white">{m.user}</div>
|
|
<div className="text-gray-400 text-xs">{m.text}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-2 flex gap-2">
|
|
<input type="text" placeholder="Escribe..." className="flex-1 p-2 rounded bg-[#071018] text-sm text-white" onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
const val = (e.currentTarget as HTMLInputElement).value.trim()
|
|
if (val) {
|
|
send('Host', val)
|
|
;(e.currentTarget as HTMLInputElement).value = ''
|
|
}
|
|
}
|
|
}} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'comments' && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-2">Comentarios</h4>
|
|
<p className="text-sm text-gray-300">Panel de comentarios en tiempo real.</p>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'banners' && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-2">Banners</h4>
|
|
<p className="text-sm text-gray-300">Gestión de banners y overlays.</p>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'notes' && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-2">Notas</h4>
|
|
<p className="text-sm text-gray-300">Notas y recordatorios del stream.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-gray-400">Seleccione una pestaña para ver opciones</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs aside: always visible on the right */}
|
|
<aside className="flex-shrink-0 bg-[#0f1720] border-l border-gray-800 flex flex-col items-center py-3" style={{ width: '84.44px', zIndex: 20 }}>
|
|
{items.map((item) => {
|
|
const active = activeTab === item.id
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onSelectTab(active ? null : item.id)}
|
|
aria-pressed={active}
|
|
aria-label={item.label}
|
|
className={`flex flex-col items-center justify-center text-[11px] transition-colors duration-150 ${
|
|
active
|
|
? 'bg-gray-700 text-white border-r-4 border-blue-500 shadow-inner'
|
|
: 'bg-[#0f1720] text-gray-300 hover:bg-gray-800 hover:text-white'
|
|
}`}
|
|
style={{ width: '84.44px', height: '84.44px' }}
|
|
>
|
|
<div className="mb-1">{React.cloneElement(item.icon as any, { size: 20 })}</div>
|
|
<div className="text-[11px] leading-tight text-center">{item.label}</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RightSidebar
|