Saltar a contenido

Carpeta Components


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 input estilizado.
  • Si error contiene 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

  1. LocationModal: el modal completo
  2. 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 CSS
  • geolocationService
  • 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 reduce para 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-dom para 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>