> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/No-Country-simulation/S02-26-Equipo-33-Web-App/llms.txt > Use this file to discover all available pages before exploring further. # Components > Comprehensive guide to reusable components in the Horse Trust frontend ## Component Architecture The Horse Trust frontend uses a modular component architecture organized by feature and function. Components are located in the `/component` directory and are built with React, TypeScript, and Tailwind CSS. ## Component Directory Structure ``` component/ ├── GetServerData/ # Server data fetching components │ ├── index.tsx │ └── RenderData.tsx ├── home/ # Homepage components │ ├── FeaturedHorses.tsx │ ├── HeroSection.tsx │ └── SecuritySection.tsx ├── layout/ # Layout components │ ├── Header.tsx │ └── Footer.tsx └── marketplace/ # Marketplace components ├── FilterSideBar.tsx ├── HorseCard.tsx ├── HorseDetailClient.tsx └── MarketplaceClient.tsx ``` ## Layout Components ### Header The main navigation header with authentication state management. **Location:** `component/layout/Header.tsx` **Type:** Client Component (`"use client"`) #### Interface ```tsx theme={null} interface HeaderProps { initialIsLoggedIn: boolean; } ``` #### Key Features * Responsive navigation with mobile menu * User authentication state display * Dynamic navigation links based on login status * User dropdown menu with avatar * Sticky positioning with backdrop blur #### Usage Example ```tsx theme={null} import Header from '@/component/layout/Header'; import { cookies } from 'next/headers'; export default async function RootLayout({ children }) { const cookieStore = await cookies(); const isLoggedIn = cookieStore.has('horse_trust_token'); return (
{children} ); } ``` #### Code Snippet ```tsx title="component/layout/Header.tsx" theme={null} export default function Header({ initialIsLoggedIn }: { initialIsLoggedIn: boolean }) { const pathname = usePathname(); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(initialIsLoggedIn); const [userName, setUserName] = useState("Usuario"); const navLinks = isLoggedIn ? [ { name: 'Mi Panel', href: '/dashboard' }, { name: 'Mis Publicaciones', href: '/mis-publicaciones' }, { name: 'Catálogo', href: '/marketplace' }, { name: 'Mensajes', href: '/chat' }, ] : [ { name: 'Catálogo', href: '/marketplace' }, { name: 'Cómo Funciona', href: '/como-funciona' }, { name: 'Haras Top', href: '/haras-top' }, ]; return (
{/* Header content */}
); } ``` ### Footer Site-wide footer with navigation links and branding. **Location:** `component/layout/Footer.tsx` **Type:** Server Component #### Features * Multi-column link organization * Social media links * Copyright information * Responsive grid layout #### Code Example ```tsx title="component/layout/Footer.tsx" theme={null} export default function Footer() { return ( ); } ``` ## Home Components ### HeroSection The landing page hero with search functionality. **Location:** `component/home/HeroSection.tsx` **Type:** Server Component #### Features * Full-width hero with background image * Search inputs for breed and discipline * Gradient overlay for text readability * Call-to-action button ```tsx title="component/home/HeroSection.tsx" theme={null} export default function HeroSection() { return (
Fondo ecuestre premium

Confianza Inquebrantable

{/* Search form */}
); } ``` ### FeaturedHorses Displays featured horses fetched from the API. **Location:** `component/home/FeaturedHorses.tsx` **Type:** Async Server Component #### Features * Server-side data fetching * Error handling for API failures * Responsive grid layout * Verified badge display ```tsx title="component/home/FeaturedHorses.tsx" theme={null} async function getHorses() { try { const res = await fetch('https://s02-26-e33-horse-trust-api.vercel.app/api/horses', { next: { revalidate: 60 } }); if (!res.ok) throw new Error('Error al traer los caballos'); const jsonResponse = await res.json(); const horsesArray = Array.isArray(jsonResponse) ? jsonResponse : jsonResponse.data; return horsesArray.slice(0, 3); } catch (error) { console.error("Error:", error); return []; } } export default async function FeaturedHorses() { const realHorses = await getHorses(); return (
{realHorses.map((horse: any) => (
{/* Horse card content */}
))}
); } ``` ### SecuritySection Highlights platform security features. **Location:** `component/home/SecuritySection.tsx` **Type:** Server Component #### Features * Two-column layout with image and text * Icon-based feature highlights * Statistics display * Call-to-action section ```tsx title="component/home/SecuritySection.tsx" theme={null} export default function SecuritySection() { return ( <>

El Motor de Verificación de HorseTrust

Auditoría de Propiedad

Títulos legales verificados

); } ``` ## Marketplace Components ### HorseCard Individual horse listing card. **Location:** `component/marketplace/HorseCard.tsx` **Type:** Server Component #### Interface ```tsx theme={null} interface HorseProps { horse: { ID: number; NAME: string; AGE: number; BREED: string; DISCIPLINE: string; LOCATION: string; PRICE: number; SELLER_VERIFIED: string; MAIN_PHOTO: string; }; } ``` #### Full Implementation ```tsx title="component/marketplace/HorseCard.tsx" theme={null} export default function HorseCard({ horse }: HorseProps) { const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }).format(horse.PRICE); return (
{horse.NAME} {horse.SELLER_VERIFIED === 'verified' && (
Verificado
)}

{horse.NAME}

{formattedPrice}
{horse.BREED} {horse.AGE} años
Ver Detalles
); } ``` ### FilterSideBar Sidebar with filtering options for marketplace. **Location:** `component/marketplace/FilterSideBar.tsx` **Type:** Client Component #### Interface ```tsx theme={null} interface FilterProps { filters: { minPrice: string; maxPrice: string; breed: string; disciplines: string[]; location: string; verifiedOnly: boolean; }; setFilters: React.Dispatch>; clearFilters: () => void; } ``` #### Implementation ```tsx title="component/marketplace/FilterSideBar.tsx" theme={null} "use client"; export default function FilterSideBar({ filters, setFilters, clearFilters }: FilterProps) { const handleDisciplineToggle = (disc: string) => { setFilters((prev: any) => { const current = prev.disciplines; const updated = current.includes(disc) ? current.filter((d: string) => d !== disc) : [...current, disc]; return { ...prev, disciplines: updated }; }); }; return ( ); } ``` ## Component Best Practices ### Server vs Client Components * Use Server Components by default for better performance * Add `"use client"` only when needed (interactivity, state, effects) * Server Components can fetch data directly ### TypeScript Interfaces Define clear interfaces for all component props: ```tsx theme={null} interface ComponentProps { data: DataType; onAction?: () => void; } ``` ### Styling Conventions * Use Tailwind utility classes * Leverage custom color variables from theme * Apply responsive design with Tailwind breakpoints ### Icon Usage Import icons from `lucide-react`: ```tsx theme={null} import { ShieldCheck, MapPin, Award } from 'lucide-react'; ``` ## Reusability Guidelines 1. Extract common UI patterns into reusable components 2. Use composition over inheritance 3. Keep components focused on a single responsibility 4. Pass data through props, not global state 5. Co-locate styles with components using Tailwind