Skip to main content
Macuin uses Laravel’s Blade component system to create reusable UI elements throughout the application. Components are defined as PHP classes in app/View/Components/ with corresponding Blade templates in resources/views/components/.

​
Available Components

ProductCard

Display automotive parts with pricing and availability

Navbar

Main navigation header with cart and user links

Footer

Site footer with links and contact information

Alert

Display notifications and alerts to users

​
ProductCard Component

The ProductCard component displays individual automotive parts in the catalog with pricing, stock status, and add-to-cart functionality.

​
Component Class

Location: app/View/Components/ProductCard.php 
<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class ProductCard extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.product-card');
    }
}

​
Blade Template

Location: resources/views/components/product-card.blade.php 
<div>
    <!-- Product card template -->
</div>

​
Usage Example

Here’s how the ProductCard is used in the catalog view (resources/views/catalogos/catalogo.blade.php:36-51): 
<div class="product-card">
    <div class="product-image">
        <i class="fas fa-cube"></i>
    </div>
    <div class="product-info">
        <span class="product-category">Filtros</span>
        <h3 class="product-name">Filtro de Aceite</h3>
        <div class="product-footer">
            <span class="product-price">$15</span>
            <span class="product-stock available">
                <i class="fas fa-check-circle"></i> 45 disponibles
            </span>
        </div>
        <button class="btn-add-cart">Agregar al Carrito</button>
    </div>
</div>

​
Product Card States

Products with stock display a green checkmark and available quantity:
<span class="product-stock available">
    <i class="fas fa-check-circle"></i> 45 disponibles
</span>
<button class="btn-add-cart">Agregar al Carrito</button>
The Navbar component provides the main navigation header used across all pages.

​
Component Class

Location: app/View/Components/Navbar.php 
<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Navbar extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.navbar');
    }
}

​
Usage in Layout

The Navbar is included in the main layout (resources/views/layouts/app.blade.php:14): 
<x-navbar />
The navbar typically includes:
  • Logo: Link to home page
  • Cart Link: Shopping cart with item count badge
  • Orders Link: Access to order history
  • User Link: Authentication and profile access
Example from the catalog page: 
<header class="header">
    <div class="header-container">
        <a href="{{ route('catalogo') }}" class="logo">MACUIN</a>
        <div class="header-right">
            <a href="{{ route('pedidos') }}" class="nav-link">Mis Pedidos</a>
            <a href="{{ route('carrito') }}" class="cart-link">
                <i class="fas fa-shopping-cart"></i>
                <span class="cart-count">2</span>
            </a>
            <a href="{{ route('login') }}" class="user-link">
                <i class="fas fa-user-circle"></i>
            </a>
        </div>
    </div>
</header>
The Footer component displays site links, contact information, and social media links.

​
Component Class

Location: app/View/Components/Footer.php 
<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Footer extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.footer');
    }
}

​
Usage in Layout

The Footer is included in the main layout (resources/views/layouts/app.blade.php:16): 
<x-footer />
The footer includes multiple sections as seen in resources/views/home/index.blade.php:232-273: 
<footer class="footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-brand">
                <a href="{{ route('index') }}" class="footer-logo">MACUIN</a>
                <p class="footer-text">Tu tienda de confianza para autopartes.</p>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
            <div class="footer-links">
                <h4 class="footer-title">Enlaces Rápidos</h4>
                <ul>
                    <li><a href="{{ route('catalogo') }}">Catálogo</a></li>
                    <li><a href="{{ route('pedidos') }}">Mis Pedidos</a></li>
                    <li><a href="{{ route('login') }}">Iniciar Sesión</a></li>
                </ul>
            </div>
            <div class="footer-contact">
                <h4 class="footer-title">Contacto</h4>
                <p><i class="fas fa-envelope"></i> [email protected]</p>
                <p><i class="fas fa-phone"></i> (555) 123-4567</p>
            </div>
        </div>
    </div>
</footer>

​
Alert Component

The Alert component displays notifications and messages to users.

​
Component Class

Location: app/View/Components/Alert.php 
<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.alert');
    }
}

​
Usage Example

Alerts can be used throughout the application to display messages: 
<x-alert type="success">
    Producto agregado al carrito exitosamente
</x-alert>

<x-alert type="error">
    Error al procesar el pedido
</x-alert>

<x-alert type="info">
    Tu pedido está en camino
</x-alert>

​
Creating Custom Components

To create a new Blade component:
  1. Generate the component class: 
    php artisan make:component ComponentName
  2. Define the component logic in app/View/Components/ComponentName.php
  3. Create the Blade template in resources/views/components/component-name.blade.php
  4. Use the component in your views: 
    <x-component-name />

​
Best Practices

Keep Components Focused

Each component should have a single, clear responsibility

Use Props

Pass data to components using attributes and props

Style Consistently

Maintain consistent styling across all components

Document Usage

Provide clear examples of how to use each component

Build docs developers (and LLMs) love

Get started for freeTalk to us