Cesar Mendivil 01178e9532 feat: Implement Dropdown component with styles and functionality

- Added Dropdown component with trigger and items
- Created Dropdown.module.css for styling
- Implemented click outside to close functionality

feat: Create Header component with styles

- Added Header.module.css for header styling
- Included action buttons and user menu styles

feat: Develop NewTransmissionModal component with styles

- Created modal overlay and content styles in NewTransmissionModal.module.css
- Added responsive design for mobile view

feat: Build PageContainer and Sidebar components with styles

- Implemented PageContainer.module.css for layout
- Created Sidebar.module.css for sidebar navigation

feat: Add Skeleton loading components with styles

- Developed Skeleton and SkeletonCard components
- Created Skeleton.module.css for loading placeholders

feat: Implement ThemeProvider for theme management

- Added ThemeProvider component for light/dark mode
- Integrated local storage for theme persistence

feat: Create Tooltip component with styles

- Developed Tooltip component for displaying hints
- Added Tooltip.module.css for tooltip styling

feat: Build TransmissionsTable component with styles

- Created TransmissionsTable.module.css for table layout
- Implemented responsive design for table

chore: Add Vite environment type declarations

- Included vite-env.d.ts for CSS module support

2025-11-05 16:14:39 -07:00

4.5 KiB

Raw Blame History

Broadcast Panel - AvanzaCast

Panel de control para gestión de transmisiones en vivo, inspirado en el diseño limpio y moderno de StreamYard.

🎨 Diseño y Estilos

Este proyecto utiliza CSS Modules para un diseño modular y mantenible, siguiendo las mejores prácticas de arquitectura de componentes React.

Paleta de Colores

--primary-blue: #1a73e8        /* Azul principal (acciones, enlaces activos) */
--primary-blue-hover: #1557b0  /* Azul hover */
--background-color: #f7f8fa    /* Fondo de página */
--surface-color: #ffffff       /* Fondo de componentes/tarjetas */
--text-primary: #212121        /* Texto principal */
--text-secondary: #5f6368      /* Texto secundario */
--border-light: #e8eaed        /* Bordes sutiles */
--active-bg-light: #e8f0fe     /* Fondo de elementos activos */

Tipografía

Familia: Inter, sistema UI sans-serif
Títulos (H2): 22px, font-weight 600
Subtítulos: 16px, font-weight 500
Texto principal: 14px, font-weight 400
Texto pequeño: 12px

📁 Assets Utilizados

Imágenes del Dashboard Techwind

Los siguientes assets fueron copiados desde /home/xesar/Descargas/techwind_v2.2.0/HTML/Dashboard/src/assets/images/:

public/assets/
├── logo-dark.png         # Logo oscuro para header
├── logo-light.png        # Logo claro para sidebar
├── logo-icon.png         # Icono del logo (64x64)
├── logo-icon-32.png      # Icono pequeño (32x32)
└── logo-icon-64.png      # Icono mediano (64x64)

public/
└── favicon.ico           # Favicon del sitio

Licencia de Assets

Los assets provienen de la plantilla Techwind v2.2.0 (Dashboard template).
Uso: Estos assets están incluidos para propósitos de desarrollo y demostración.
Nota: Reemplazar con assets propios antes de producción si se requiere licencia comercial.

🏗️ Estructura de Componentes

src/components/
├── PageContainer.tsx          # Contenedor principal con layout
├── PageContainer.module.css   # Estilos del contenedor
├── Sidebar.tsx                # Barra lateral de navegación
├── Sidebar.module.css         # Estilos del sidebar
├── Header.tsx                 # Barra superior
├── Header.module.css          # Estilos del header
├── TransmissionsTable.tsx     # Tabla de transmisiones
├── TransmissionsTable.module.css
├── NewTransmissionModal.tsx   # Modal de creación
└── NewTransmissionModal.module.css

🚀 Desarrollo

Iniciar el servidor de desarrollo

Desde la raíz del monorepo:

npm run dev:broadcast-panel

O directamente en el paquete:

cd packages/broadcast-panel
npm run dev

El servidor estará disponible en: http://localhost:5173/

Build de producción

npm run build

📱 Responsive Design

El diseño es completamente responsivo con breakpoints:

Desktop: > 1024px (sidebar fijo, header completo)
Tablet: 768px - 1024px (sidebar colapsable)
Mobile: < 768px (sidebar con toggle, header compacto)

✨ Características UI

Sidebar

Navegación con indicadores visuales de página activa
Sección de almacenamiento con barra de progreso
Diseño fijo con scroll interno
Iconos emoji temporales (reemplazar con SVG icons)

Header

Toggle de tema claro/oscuro
Notificaciones con badge
Menú de usuario
Botón de "Mejora tu plan"

Transmissions Table

Tabs para filtrar (Próximamente / Anteriores)
Estados hover en filas
Botones de acción (Entrar al estudio, Más opciones)
Estado vacío con mensaje descriptivo

Overlay con backdrop blur
Animaciones de entrada (fadeIn + slideUp)
Formulario con validación
Cierre con Escape o clic fuera

🔧 Próximas Mejoras

Reemplazar emojis con iconos SVG (React Icons)
Implementar tema oscuro completo
Añadir animaciones de transición entre páginas
Implementar filtrado real de tabs (Próximamente/Anteriores)
Añadir estados de carga (loading skeletons)
Implementar dropdown del menú de usuario
Añadir tooltips informativos

📝 Notas de Implementación

Este panel sigue el patrón de diseño de StreamYard, caracterizado por:

Simplicidad: UI limpia sin elementos innecesarios
Claridad: Jerarquía visual clara con espaciado generoso
Consistencia: Uso uniforme de colores, tipografía y espaciado
Accesibilidad: Contraste adecuado, tamaños de fuente legibles
Responsividad: Adaptación fluida a diferentes dispositivos

4.5 KiB Raw Blame History