Category Styles - Copy this React, Tailwind Component to your project
Genera y hagamos un diseño de un calendario de vista semanal q sea y contenga Contenedor principal: Utiliza un contenedor flexible con display: grid para organizar los días de la semana y las horas del día en columnas y filas respectivamente. El número de columnas debe ser de 8: una para la columna de horas y siete para los días de la semana. Encabezado de la semana: Muestra los días de la semana (lunes a domingo) junto con la fecha correspondiente. Utiliza el formato: Lunes 11. Usa el estilo del encabezado de los días del calendario mensual (font medium, text sm, etc.). Columna de horas: Muestra las horas (por ejemplo, de 00:00 a 23:00) en una columna fija a la izquierda. Las celdas de las horas deben ser consistentes en altura y estilo, similares a las celdas vacías del calendario mensual. Diseño y Estilo de Eventos Estilo de eventos: Cada evento debe ser un bloque coloreado con esquinas redondeadas, usando los colores definidos por las categorías (important, personal, work) en el código proporcionado. El color de fondo del evento debe ser el definido por backgroundColor en categoryStyles, y el borde debe coincidir con el borderColor. Información dentro del evento: Muestra: Hora de inicio y fin: 10:00 11:30. Título del evento. Usa un diseño compacto y asegúrate de que el texto sea legible. Si el evento tiene imagen de perfil, muestra un ícono redondo pequeño en una esquina (opcional). Posicionamiento de eventos: Cada evento debe posicionarse en su día y hora correspondiente. Ajusta la altura del evento proporcionalmente a su duración (por ejemplo, 1 hora = 1 unidad de altura). Funcionalidades Interactivas Agregar eventos: Al hacer clic en una celda vacía, abre un modal (ya definido en el código del calendario) para agregar un nuevo evento. Rellena automáticamente la fecha y hora seleccionadas en el formulario. Editar eventos: Al hacer clic en un evento, abre el modal con los datos del evento para editar o eliminar. Filtro de categorías: Mantén el filtro de categorías en el encabezado para que los eventos visibles se limiten a la categoría seleccionada. Búsqueda: Implementa la barra de búsqueda para filtrar eventos visibles según el texto ingresado. Estilos Detallados Colores y bordes: Usa los colores definidos en categoryStyles para eventos. Las celdas deben tener bordes grises claros (#E5E5E5) para mantener la consistencia. Tipografía: Usa las mismas clases de tipografía definidas en el calendario mensual. Transiciones: Aplica efectos hover suaves al interactuar con eventos y celdas vacías. Hover y selección: Resalta la celda o evento sobre el que se pasa el cursor con un fondo ligeramente más claro o sombra suave. Componentes React Semana y días: Usa un componente WeekView que reciba events y currentWeek como props. Divide la semana en días y renderiza los eventos por día. Celda de día y hora: Crea un componente TimeSlot que reciba: time: Hora del día. day: Día de la semana. events: Eventos del día y hora. Renderiza los eventos correspondientes o una celda vacía. Eventos: Usa un componente EventBlock que reciba: title, start, end, category. Estiliza el evento según su categoría. Grid y Espaciado Contenedor de la semana: css Copy code display: grid; grid template columns: 100px repeat(7, 1fr); grid template rows: repeat(24, 1fr); gap: 1px; background color: #E5E5E5; /* Para simular bordes */ Celdas de tiempo: css Copy code background color: white; border: 1px solid #E5E5E5; Eventos: css Copy code position: absolute; top: calc(var( start time) * 100%); height: calc(var( duration) * 100%); width: 100%; border radius: 4px; padding: 4px; background color: var( background color); border: 1px solid var( border color); Responsividad Asegúrate de que el diseño sea responsive: En pantallas pequeñas, usa un diseño deslizable horizontalmente. Mantén las celdas y eventos legibles.
