Blade Components

This section documents the reusable Blade components used throughout the application.

Component Organization

Blade components are organized in resources/views/components/:

resources/views/components/
├── button.blade.php           # Button component
├── card.blade.php             # Card container
├── form/                      # Form-related components
│   ├── input.blade.php
│   ├── select.blade.php
│   ├── textarea.blade.php
│   └── error.blade.php
├── table/                     # Table components
│   ├── table.blade.php
│   ├── header.blade.php
│   ├── row.blade.php
│   └── cell.blade.php
└── ...

Using Components

Components are called using the <x-component-name> syntax:

{{-- Simple component --}}
<x-button>Click Me</x-button>

{{-- Component with attributes --}}
<x-button color="blue" size="lg">
    Large Blue Button
</x-button>

{{-- Nested components --}}
<x-card>
    <x-slot name="header">
        Card Title
    </x-slot>

    Card content goes here

    <x-slot name="footer">
        <x-button>Action</x-button>
    </x-slot>
</x-card>

Common Component Patterns

Entity Color Integration

Many components accept entity-based colors:

<x-badge :color="$entityColor('item')">
    Item Badge
</x-badge>

Conditional Rendering

<x-button
    :disabled="$isDisabled"
    :loading="$isLoading"
>
    Submit
</x-button>

Slots

<x-modal>
    <x-slot name="title">
        Modal Title
    </x-slot>

    <x-slot name="content">
        Modal body content
    </x-slot>

    <x-slot name="footer">
        <x-button>Close</x-button>
    </x-slot>
</x-modal>

Component Categories

Form Components

Forms - Input fields, selects, textareas, validation

Layout Components

Layouts - Page layouts, form pages, show pages, pagination

Table Components

Tables - Data tables, sortable columns, row actions, mobile cards

Button Components

Buttons - Primary buttons, danger buttons, secondary buttons

Modals - Dialog modals, confirmation modals, delete modals

Entity Components

Entity - Entity headers, badges, color system integration

Display Components

Display - Display badges, formatted values, system properties

Navigation - App navigation, dropdowns, nav links, breadcrumbs

Icon Components

Icons - Heroicons integration and usage patterns

Best Practices

Keep components focused - One responsibility per component
Use entity colors - Leverage the entity color system
Document props - Add PHPDoc comments for component attributes
Test thoroughly - Include component tests
Follow naming conventions - Use kebab-case for component names