45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import React, {useState} from 'react'
|
|
import { ComputerDesktopIcon } from '@heroicons/react/24/outline'
|
|
|
|
function CreateCard({title, subtitle}:{title:string; subtitle?:string}){
|
|
return (
|
|
<button className="create-card rounded-md hover:shadow-sm p-4 text-left">
|
|
<div className="icon bg-sky-50 text-sky-600 flex items-center justify-center"><ComputerDesktopIcon className="w-6 h-6" /></div>
|
|
<div className="ml-3">
|
|
<div className="font-medium">{title}</div>
|
|
{subtitle && <div className="text-sm text-slate-500">{subtitle}</div>}
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default function Broadcasts(){
|
|
const [tab, setTab] = useState<'upcoming'|'previous'>('upcoming')
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto">
|
|
<h1 className="text-2xl font-semibold mb-6">Inicio</h1>
|
|
|
|
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
|
|
<CreateCard title="Transmisión en vivo" subtitle="Inicia una transmisión" />
|
|
<CreateCard title="Grabación" subtitle="Inicia una grabación" />
|
|
<CreateCard title="Seminario web On-Air" subtitle="Programar evento" />
|
|
</section>
|
|
|
|
<section className="panel p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-medium">Transmisiones y grabaciones</h2>
|
|
<div className="flex items-center gap-2">
|
|
<button className={`tab-btn ${tab==='upcoming'?'active':''}`} onClick={()=>setTab('upcoming')}>Próximamente</button>
|
|
<button className={`tab-btn ${tab==='previous'?'active':''}`} onClick={()=>setTab('previous')}>Anteriores</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-h-[260px] flex items-center justify-center text-slate-500">
|
|
No tienes próximas transmisiones ni grabaciones
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|