Aprende a construir un componente product detail en React que se despliega como menú lateral fijo al hacer clic en una card, usando Tailwind CSS y estilos personalizados para lograr una interfaz limpia y funcional en tu e-commerce.

Este recurso es ideal para quienes ya manejan componentes en React y quieren avanzar hacia interfaces más interactivas. La meta es preparar la base visual del side menu antes de sumar la lógica de estados globales que abrirá y cerrará esa ventana lateral con la información de cada producto.

¿Qué es un componente product detail en React?

Es un componente que muestra el detalle de un producto seleccionado dentro de una barra lateral fija. La idea es que al dar clic sobre cualquier card, se despliegue al lado derecho una ventanita con foto, descripción, título y precio del producto, además de una X para cerrarla.

¿Qué es un side menu en una aplicación web? Es una barra lateral, normalmente fija a un costado de la pantalla, que muestra contenido contextual sin sacar al usuario de la vista principal. Sirve para mostrar detalles, filtros o menús sin recargar la página.

En la clase, el flujo arranca creando primero la interfaz gráfica del componente y deja la lógica de apertura y cierre para una segunda parte [01:30].

¿Cómo estructurar el componente ProductDetail paso a paso?

La construcción sigue una lógica simple: primero el archivo, luego la etiqueta semántica, después los estilos y al final los elementos internos como el título y el icono de cierre.

¿Qué archivos necesitas crear?

Dentro de la carpeta de componentes, creas la carpeta ProductDetail con dos archivos clave [03:45]:

• Un archivo ProductDetail.jsx con el componente y su export default.
• Un archivo styles.css para los estilos específicos que Tailwind no cubre.
• Una importación de los estilos al inicio del componente con import './styles.css'.

La etiqueta base es un aside, que en HTML semántico representa contenido lateral relacionado con el principal. Dentro va un div que funciona como wrapper del título y el icono.

¿Por qué combinar Tailwind con CSS personalizado?

Tailwind cubre la mayoría de utilidades, pero hay medidas muy específicas que no trae por defecto. Un width de 360 píxeles, por ejemplo, no existe como clase nativa. En lugar de extender la configuración de Tailwind solo para este caso, defines una clase productdetail en tu CSS con width: 360px y la combinas con las clases utilitarias de Tailwind [05:20].

Esa decisión es práctica: cuando un valor es único en todo el proyecto, escribir CSS plano evita inflar la configuración global.

¿Cómo lograr que el side menu quede fijo y con la altura correcta?

Aquí entra una de las partes más interesantes de la clase: ajustar el componente para que ocupe exactamente el alto disponible sin pisar el navbar ni generar scroll indeseado.

Las clases de Tailwind aplicadas al aside son:

• flex flex-col para apilar los elementos internos de arriba hacia abajo.
• fixed right-0 top-[68px] para anclar el menú al costado derecho debajo del navbar.
• bg-white para que las cards no se transparenten por debajo.
• border border-black rounded para el contorno y las esquinas redondeadas que mantienen la coherencia visual.

¿Qué hace la función calc en CSS? Permite hacer operaciones matemáticas entre unidades distintas. Por ejemplo, calc(100vh - 68px) resta el alto del navbar a la altura total de la ventana, dejando el espacio justo para el contenido lateral.

En el archivo styles.css, la regla queda así:

css .productdetail { width: 360px; height: calc(100vh - 68px); }

El valor 100vh representa el 100% del view height, es decir, todo el alto visible de la ventana. Al restar los 68 píxeles del navbar, el menú lateral encaja perfecto sin generar scroll extra [10:15].

¿Cómo agregar el título y el icono de cierre al detalle del producto?

Dentro del aside, sumas un div que funciona como contenedor del título y el icono. Ese contenedor lleva las clases flex justify-between items-center p-6.

• flex ubica los elementos uno al lado del otro.
• justify-between separa el título a un extremo y la X al otro.
• items-center los alinea verticalmente.
• p-6 da aire alrededor para que respire la composición.

El título va en una etiqueta h2 con el texto Detail y las clases font-medium text-xl para darle peso visual sin sobrecargar. El icono de cierre, por ahora, queda como un simple div con una X mientras se prepara la integración de una librería de iconos [13:40].

¿Qué tarea de pair programming te queda pendiente?

La clase cierra con un reto práctico: instalar una librería de iconos para reemplazar el carrito, la X y el botón de más por versiones más pulidas. La instrucción es revisar la documentación, importar iconos y experimentar con ellos en la aplicación.

Esta dinámica de pair programming busca que apliques por tu cuenta lo aprendido antes de ver la solución en la siguiente sesión, donde se completará el product detail y se conectará con la lógica de estados globales.

¿Ya tienes lista tu librería de iconos favorita para este reto? Cuéntame en los comentarios cuál vas a usar y por qué.