Cesar Mendivil
01178e9532
- 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
148 lines
4.5 KiB
Markdown
148 lines
4.5 KiB
Markdown
# 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
|
|
|
|
```css
|
|
--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:
|
|
|
|
```bash
|
|
npm run dev:broadcast-panel
|
|
```
|
|
|
|
O directamente en el paquete:
|
|
|
|
```bash
|
|
cd packages/broadcast-panel
|
|
npm run dev
|
|
```
|
|
|
|
El servidor estará disponible en: **http://localhost:5173/**
|
|
|
|
### Build de producción
|
|
|
|
```bash
|
|
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
|
|
|
|
### Modal
|
|
- 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:
|
|
|
|
1. **Simplicidad:** UI limpia sin elementos innecesarios
|
|
2. **Claridad:** Jerarquía visual clara con espaciado generoso
|
|
3. **Consistencia:** Uso uniforme de colores, tipografía y espaciado
|
|
4. **Accesibilidad:** Contraste adecuado, tamaños de fuente legibles
|
|
5. **Responsividad:** Adaptación fluida a diferentes dispositivos
|