Shared UI Components
Relevant source files
The following files were used as context for generating this wiki page:
The Shared UI Components module provides a set of reusable React components and layout structures designed to maintain visual consistency and provide core navigation across the "Bazar del Venado" application. These components leverage React-Bootstrap for responsive grid systems and UI elements, and Framer Motion for interactive animations.
The primary purpose of these components is to facilitate user interaction with the product marketplace, including navigation between functional areas like product publishing, messaging, and personal inventory management.
Navigation and Layout
Application Navbar
The AppNavbar component serves as the primary navigation hub. It dynamically adjusts its links based on the user's authentication state, provided by an authentication context.
- Public Links: "Inicio", "Iniciar sesión", and "Registrarse".
- Authenticated Links: "Publicar", "Mis productos", "Mensajes", and "Perfil".
- Logic: It utilizes the
useAuthhook to determine if auserobject exists. If authenticated, it displays the user's name and a "Cerrar sesión" option.
Sources: Front/src/components/navbar.jsx:7-60
The diagram shows the conditional rendering logic of the Navbar based on the authentication state. Sources: Front/src/components/navbar.jsx:10-58
Data Presentation Tables
The project includes a Tabla component that utilizes Material UI (@mui/material) for structured data display. This component is designed to present product information in a tabular format.
| Column | Description |
|---|---|
| ID | Numerical identifier for the row/product. |
| Nombre | The name of the product (e.g., "Producto A"). |
| Precio | The numerical price value associated with the item. |
Sources: Front/src/components/Tabla.js:11-40
Product Display Components
Product Cards
Used within Home and MyProducts pages, product cards are implemented using react-bootstrap's Card component. They feature image containers with fixed heights and object-fit: cover to ensure uniformity.
- Interactive Elements: Cards utilize
framer-motionfor hover effects (e.g.,scale: 1.02). - Information Hierarchy: Title, description (truncated in home view), price, and action buttons ("Ver más" or "Ver detalles").
Sources: Front/src/pages/home.jsx:119-158, Front/src/pages/myProducts.jsx:45-79
Product Detail View
The ProductDetail component provides a split-view layout for deep-diving into a single product's attributes.
The diagram illustrates the layout structure of the product detail page. Sources: Front/src/pages/productDetail.jsx:54-94
Functional UI Elements
Form Components
Standardized forms are used for publishing products and user authentication. The PublishProduct component specifically highlights complex input handling:
- Image Upload: Includes a file input with a preview mechanism and a 5MB size limit validation.
- Category Selection: A dropdown populated from a constant
CATEGORIESarray. - Validation: Frontend checks for name, description, price (must be > 0), and mandatory image attachment.
Sources: Front/src/pages/publishProduct.jsx:25-90
Messaging Interface
The Messages component provides a dual-pane UI for communication.
- Left Pane: A
chat-listdisplaying active conversations with product names and the last message timestamp. - Right Pane: The active chat window with a scrollable message history and a fixed input form at the bottom.
- Visual Cues: Messages from the current user are aligned to the right with a primary background color, while received messages are aligned to the left with a light background.
Sources: Front/src/pages/Messages.jsx:87-169
Summary
The Shared UI Components in this repository establish a consistent design language through the use of Bootstrap and Material UI. By centralizing navigation in the AppNavbar and standardizing data presentation through Card and Table structures, the application ensures a cohesive user experience across product discovery, listing management, and peer-to-peer communication.