Carpeta Components
Navbar.jsx
Componente de barra de navegación superior
Función
Permite navegar entre las páginas principales de la aplicación mediante íconos interactivos:
- Home (
/home) - Perfil de usuario (
/profile) - Carrito de compras (
/cart) - Menú lateral (función pasada por props)
Incluye también:
- Campo de búsqueda (por implementar)
- Logo de AgroMarket
Props
| Prop | Tipo | Descripción |
|---|---|---|
onMenuClick |
Function | Función que se llama al hacer click en el menú |
Dependencias
react-router-dom→ para navegación (useNavigate)lucide-react→ íconos- Imágenes:
logo.png
Sidebar.jsx
Componente de barra lateral
Función
Proporciona navegación vertical en la aplicación.
Elementos de navegación
| Texto | Ruta |
|---|---|
| Categorías | /categorias |
| Vender | /vender |
| Créditos | /creditos |
| Perfil | /profile |
Detalles
- Usa
react-router-dom(useNavigate) para navegación programática. - Íconos de navegación de
lucide-react. - Estilo visual: barra lateral vertical (izquierda), fondo verde oscuro (
bg-green-900). - Componente reutilizable.
Layout.jsx
Componente de layout principal
Función
Define la estructura base de la aplicación AgroMarket:
- Barra superior (Navbar)
- Barra lateral (Sidebar) con comportamiento de toggle
- Área de contenido principal (Outlet)
Funcionalidad
| Elemento | Descripción |
|---|---|
| Navbar | Muestra la barra superior; pasa control para abrir Sidebar |
| Sidebar | Sidebar lateral; animada con transición; puede ocultarse |
| Overlay | Capa oscura al fondo cuando Sidebar está abierto |
| Outlet | Área de renderizado para rutas hijas (React Router) |
Hooks
useState→ maneja estado de apertura/cierre del Sidebar
Dependencias
react-router-dom(Outlet)Navbar(componente)Sidebar(componente)
Input.jsx
Componente reutilizable de campo de formulario (input)
Props
| Prop | Tipo | Descripción |
|---|---|---|
name |
string | Nombre e ID del campo |
type |
string | Tipo de input (text, email, password, etc.) |
value |
string | Valor del input (campo controlado) |
onChange |
function | Función llamada al cambiar el valor |
placeHolder |
string | Texto de placeholder |
required |
boolean | Si es campo obligatorio (true / false) |
error |
string | Mensaje de error que se muestra bajo el campo |
Comportamiento
- Muestra un
inputestilizado. - Si
errorcontiene texto, muestra un mensaje de error en rojo debajo del campo. - Si el campo es
required, se valida HTML5.
ProductCard.jsx
Componente de tarjeta de producto
Función
Muestra la información básica de un producto en una tarjeta visual:
- Imagen del producto
- Nombre
- Descripción (truncada a 58 caracteres)
- Precio
- Botón de acción (texto varía según tipo de usuario)
Props
| Prop | Tipo | Descripción |
|---|---|---|
product |
Object | Objeto producto (debe contener: image, name, description, price) |
onViewDetails |
Function | Función que se ejecuta al hacer click en el botón |
Comportamiento
- Si el usuario autenticado es un seller, el botón muestra texto:
Editar. - Si es otro tipo de usuario, el botón muestra:
Agregar al carrito. - Si la imagen falla al cargar, se muestra una imagen por defecto de error.
Uso de hooks
useAuth(hook personalizado) → para obtener el rol del usuario (user?.role).
Button.jsx
Componente de botón reutilizable
Función
Botón estilizado reutilizable con variantes de color y estados.
Props
| Prop | Tipo | Descripción |
|---|---|---|
children |
Node | Contenido del botón (texto o íconos) |
onClick |
Function | Función que se ejecuta al hacer click |
type |
string | Tipo de botón (button, submit, reset) (default: 'button') |
variant |
string | Variante de color y estilo: 'primary', 'secondary', 'danger', 'success' (default: 'primary') |
disabled |
boolean | Si el botón está deshabilitado (default: false) |
className |
string | Clases CSS adicionales |
Estilos
- Base: padding, borde redondeado, transición en hover.
- Variantes predefinidas:
- primary: verde (por defecto)
- secondary: gris
- danger: rojo
- success: verde más intenso
Pagination.jsx
Componente de paginación
Función
Permite al usuario navegar entre páginas de resultados (productos, listas, etc.).
Props
| Prop | Tipo | Descripción |
|---|---|---|
currentPage |
number | Página actual |
totalPages |
number | Número total de páginas |
onPageChange |
function | Función que se llama al cambiar de página, recibe el número de la nueva página |
Comportamiento
- Muestra botones numerados por página.
- Muestra botones "Previous" y "Next" si aplica.
- La página actual se destaca visualmente.
- Animación hover (zoom suave).
- Se puede reutilizar en cualquier componente que necesite paginación (productos, usuarios, etc.).
LocationModal.jsx
Componente modal para seleccionar una ubicación en el mapa
Función
Permite al usuario seleccionar una ubicación geográfica interactiva mediante un mapa con marcador arrastrable (Leaflet).
Ideal para:
- Definir direcciones de entrega
- Guardar ubicaciones de vendedores o usuarios
Composición
- LocationModal: el modal completo
- LocationPicker: componente interno que maneja el marcador interactivo
Props
| Prop | Tipo | Descripción |
|---|---|---|
position |
Array | Posición actual [lat, lng] |
setPosition |
Function | Función para actualizar la posición |
setAddress |
Function | Función para actualizar la dirección obtenida (string) |
setLat |
Function | Función para actualizar la latitud |
setLng |
Function | Función para actualizar la longitud |
onClose |
Function | Función para cerrar el modal |
Comportamiento
- Mapa basado en react-leaflet + OpenStreetMap
- El usuario puede:
- Hacer clic en el mapa para mover el marcador
- Arrastrar el marcador
- Confirmar la selección con el botón
Guardar dirección - Cancelar con el botón
Cerrar - Llama a
geolocationService(lat, lng)para obtener la dirección basada en las coordenadas - Maneja errores en la consulta de dirección
Dependencias
react-leaflet+ Leaflet CSSgeolocationService- Imagen personalizada para marcador (
marker.svg)
---
OrderCard.jsx
Componente de tarjeta para pedidos
Función
Muestra información detallada de un pedido en formato de tarjeta, útil tanto para compradores como para vendedores. Incluye:
- Código del pedido
- Fecha y hora del pedido
- Estado (pendiente, en progreso, entregado, cancelado)
- Comprador y vendedor involucrados
- Total calculado automáticamente
- Listado de productos con cantidad y subtotales
- Botón de navegación a detalle del pedido (si
isPast = false)
Props
| Prop | Tipo | Descripción |
|---|---|---|
order |
Object | Objeto que representa el pedido |
isPast |
boolean | Determina si el pedido ya fue completado para ocultar acciones |
Comportamiento
- Usa
reducepara calcular el total y la cantidad total de ítems. - El color del estado cambia dinámicamente según
status. - El botón “Ver más” navega a la ruta
/orders/:id. - Usa íconos de
lucide-react.
Sidebar.jsx (ampliado)
Componente de navegación lateral para el vendedor
Función
Permite acceder a secciones clave de la app orientadas a vendedores:
- Categorías
- Publicación de productos
- Créditos
- Perfil
Detalles
- Implementado como una barra vertical fija con
bg-green-900. - Usa íconos visuales para mayor claridad (via
lucide-react). - Usa
react-router-dompara navegación programática.
Rutas disponibles
| Texto del ítem | Ruta |
|---|---|
| Categorías | /categorias |
| Vender | /vender |
| Créditos | /creditos |
| Perfil | /profile |
Ejemplo de uso
<Sidebar />
Mejora general: Estilos y ejemplos
Convenciones de estilos usados
- Fuente:
font-poppins - Botones:
bg-primaryColor,hover:bg-primaryAltDark - Inputs:
bg-altBgColor, bordes redondeados y sombra - Estados: Colores dinámicos según estado del pedido
Ejemplo adicional para Button.jsx
<Button variant="success" onClick={handleSubmit}>
Confirmar compra
</Button>