Blade Component ลับ
ที่ผู้พัฒนาลืมว่ามีอยู่

<x-card title="สรุปยอดขาย">
    เนื้อหาอยู่ตรงนี้
</x-card>

<div class="alert alert-{{ $type ?? 'info' }}">
    {{ $slot }}
</div>

<x-alert type="success">
    บันทึกข้อมูลสำเร็จแล้ว!
</x-alert>

php artisan make:component UserCard

class UserCard extends Component
{
    public string $name;
    public string $role;

    public function __construct(string $name, string $role = 'Member')
    {
        $this->name = $name;
        $this->role = $role;
    }

    public function render()
    {
        return view('components.user-card');
    }
}

<div class="user-card">
    <h3>{{ $name }}</h3>
    <span class="badge">{{ $role }}</span>
</div>

<x-user-card name="สมชาย" role="Admin" />

@props([
    'type'  => 'text',
    'label' => '',
    'name',
    'value' => '',
])

<div class="form-group">
    <label>{{ $label }}</label>
    <input 
        type="{{ $type }}" 
        name="{{ $name }}" 
        value="{{ $value }}"
        class="form-control"
    >
</div>

<x-form.input label="อีเมล" name="email" type="email" :value="old('email')" />

<div class="card">
    @if (isset($header))
    <div class="card-header">{{ $header }}</div>
    @endif

    <div class="card-body">{{ $slot }}</div>

    @if (isset($footer))
    <div class="card-footer">{{ $footer }}</div>
    @endif
</div>

<x-card>
    <x-slot:header>
        สรุปยอดขายประจำเดือน
    </x-slot:header>

    <p>ยอดรวม: 125,000 บาท</p>

    <x-slot:footer>
        อัปเดตล่าสุด: {{ now()->format('d/m/Y') }}
    </x-slot:footer>
</x-card>

@props(['type' => 'text', 'name'])

<input 
    type="{{ $type }}"
    name="{{ $name }}"
    {{ $attributes->merge(['class' => 'form-control']) }}
>

{{-- เรียกใช้ --}}
<x-form.input name="phone" class="w-full" placeholder="กรอกเบอร์โทร" />

{{-- ผลลัพธ์ที่ได้ --}}
<input type="text" name="phone" class="form-control w-full" placeholder="กรอกเบอร์โทร">

@component('components.card', ['title' => 'Hello'])
    เนื้อหาภายใน Card
@endcomponent

@props(['title' => null])

<div class="card shadow-sm mb-4">
    @if ($title)
    <div class="card-header fw-bold">
        {{ $title }}
    </div>
    @endif

    <div class="card-body">
        {{ $slot }}
    </div>
</div>

@props([
    'label'       => '',
    'name',
    'type'        => 'text',
    'value'       => '',
    'placeholder' => '',
    'required'    => false,
])

<div class="mb-3">
    @if ($label)
    <label for="{{ $name }}" class="form-label">
        {{ $label }}
        @if ($required)
            <span class="text-danger">*</span>
        @endif
    </label>
    @endif

    <input
        id="{{ $name }}"
        type="{{ $type }}"
        name="{{ $name }}"
        value="{{ $value }}"
        placeholder="{{ $placeholder }}"
        {{ $attributes->merge([
            'class' => 'form-control' . ($errors->has($name) ? ' is-invalid' : '')
        ]) }}
    >

    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

<x-card title="เพิ่มผู้ใช้งาน">
    <form action="/users" method="POST">
        @csrf

        <x-form.input
            label="ชื่อ-นามสกุล"
            name="name"
            type="text"
            :value="old('name')"
            placeholder="กรอกชื่อ-นามสกุล"
            required
        />

        <x-form.input
            label="อีเมล"
            name="email"
            type="email"
            :value="old('email')"
            placeholder="example@email.com"
            required
        />

        <x-form.input
            label="รหัสผ่าน"
            name="password"
            type="password"
            placeholder="อย่างน้อย 8 ตัวอักษร"
            required
        />

        <button type="submit" class="btn btn-primary">
            บันทึก
        </button>
    </form>
</x-card>