مكونات Blade المتقدمة

# مكون قائم على الفئة
php artisan make:component Alert

# ينشئ:
# app/View/Components/Alert.php
# resources/views/components/alert.blade.php

# مكون مجهول
php artisan make:component forms.input --view

# ينشئ:
# resources/views/components/forms/input.blade.php

<?php
// app/View/Components/UserCard.php
namespace App\View\Components;

use App\Models\User;
use Illuminate\View\Component;

class UserCard extends Component
{
    public $user;
    public $showEmail;
    public $theme;

    public function __construct(User $user, $showEmail = false, $theme = 'light')
    {
        $this->user = $user;
        $this->showEmail = $showEmail;
        $this->theme = $theme;
    }

    // خاصية محسوبة - متاحة في العرض
    public function fullName()
    {
        return $this->user->first_name . ' ' . $this->user->last_name;
    }

    // التحقق من وجود صورة رمزية
    public function hasAvatar()
    {
        return !empty($this->user->avatar);
    }

    // الحصول على رابط الصورة الرمزية مع احتياطي
    public function avatarUrl()
    {
        return $this->hasAvatar()
            ? asset('storage/' . $this->user->avatar)
            : 'https://ui-avatars.com/api/?name=' . urlencode($this->fullName());
    }

    // الحصول على فئات السمة
    public function themeClasses()
    {
        return $this->theme === 'dark'
            ? 'bg-gray-800 text-white'
            : 'bg-white text-gray-900';
    }

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

<!-- resources/views/components/user-card.blade.php -->
<div class="user-card {{ $themeClasses() }}">
    <img src="{{ $avatarUrl() }}" alt="{{ $fullName() }}">

    <div>
        <h3>{{ $fullName() }}</h3>
        <p>@{{ $user->username }}</p>

        @if($showEmail)
            <p>{{ $user->email }}</p>
        @endif
    </div>

    {{ $slot }}
</div>

<!-- استخدام المكون -->
<x-user-card :user="$user" show-email theme="dark">
    <button>متابعة</button>
</x-user-card>

<!-- resources/views/components/badge.blade.php -->
@props([
    'type' => 'default',
    'size' => 'md',
])

@php
$classes = match($type) {
    'success' => 'bg-green-100 text-green-800',
    'danger' => 'bg-red-100 text-red-800',
    'warning' => 'bg-yellow-100 text-yellow-800',
    'info' => 'bg-blue-100 text-blue-800',
    default => 'bg-gray-100 text-gray-800',
};

$sizeClasses = match($size) {
    'sm' => 'text-xs px-2 py-1',
    'lg' => 'text-base px-4 py-2',
    default => 'text-sm px-3 py-1',
};
@endphp

<span {{ $attributes->merge(['class' => "badge $classes $sizeClasses rounded-full"]) }}>
    {{ $slot }}
</span>

<!-- الاستخدام -->
<x-badge type="success">نشط</x-badge>
<x-badge type="danger" size="lg">حرج</x-badge>
<x-badge type="warning" class="ml-2">قيد الانتظار</x-badge>

<!-- resources/views/components/button.blade.php -->
@props([
    'type' => 'button',
    'variant' => 'primary',
    'size' => 'md',
    'disabled' => false,
])

@php
$variantClasses = match($variant) {
    'primary' => 'bg-blue-600 hover:bg-blue-700 text-white',
    'secondary' => 'bg-gray-600 hover:bg-gray-700 text-white',
    'danger' => 'bg-red-600 hover:bg-red-700 text-white',
    'outline' => 'border border-gray-300 hover:bg-gray-50 text-gray-700',
};

$sizeClasses = match($size) {
    'sm' => 'px-3 py-1 text-sm',
    'lg' => 'px-6 py-3 text-lg',
    default => 'px-4 py-2 text-base',
};

$baseClasses = 'rounded font-medium focus:outline-none focus:ring-2 transition';
@endphp

<button
    type="{{ $type }}"
    {{ $attributes->class([$baseClasses, $variantClasses, $sizeClasses])
        ->merge(['disabled' => $disabled]) }}>
    {{ $slot }}
</button>

<!-- أمثلة الاستخدام -->
<x-button>زر افتراضي</x-button>
<x-button variant="danger" size="lg">حذف</x-button>
<x-button variant="outline" class="mt-4" id="submit-btn">إرسال</x-button>
<x-button type="submit" :disabled="$processing">حفظ</x-button>

<!-- resources/views/components/card.blade.php -->
<div {{ $attributes->merge(['class' => 'card border rounded-lg shadow-sm']) }}>
    @if(isset($header))
        <div class="card-header border-b px-6 py-4 bg-gray-50">
            {{ $header }}
        </div>
    @endif

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

    @if(isset($footer))
        <div class="card-footer border-t px-6 py-4 bg-gray-50">
            {{ $footer }}
        </div>
    @endif
</div>

<!-- استخدام الفتحات المسماة -->
<x-card>
    <x-slot:header>
        <h2 class="text-xl font-bold">ملف المستخدم</h2>
    </x-slot:header>

    <!-- محتوى الفتحة الافتراضية -->
    <p>هذا هو المحتوى الرئيسي للبطاقة.</p>
    <p>معلومات المستخدم تذهب هنا.</p>

    <x-slot:footer>
        <button>تحرير الملف</button>
        <button>حذف الحساب</button>
    </x-slot:footer>
</x-card>

<!-- resources/views/components/dropdown.blade.php -->
@props(['items'])

<div class="dropdown" x-data="{ open: false }">
    <button @click="open = !open">
        {{ $trigger }}
    </button>

    <div x-show="open" @click.away="open = false" class="dropdown-menu">
        @foreach($items as $item)
            {{ $slot(['item' => $item]) }}
        @endforeach
    </div>
</div>

<!-- استخدام الفتحات النطاقية -->
<x-dropdown :items="$users">
    <x-slot:trigger>
        اختر مستخدماً
    </x-slot:trigger>

    <!-- فتحة نطاقية مع الوصول إلى $item -->
    @scope($item)
        <a href="/users/{{ $item->id }}">
            {{ $item->name }}
        </a>
    @endscope
</x-dropdown>

<!-- مكون ديناميكي بناءً على متغير -->
@php
$componentType = $user->is_premium ? 'premium-badge' : 'regular-badge';
@endphp

<x-dynamic-component :component="$componentType" :user="$user" />

<!-- مكون ديناميكي في حلقة -->
@foreach($notifications as $notification)
    <x-dynamic-component
        :component="'notifications.' . $notification->type"
        :notification="$notification"
    />
@endforeach

<?php
// وحدة التحكم أو الخدمة
class NotificationRenderer
{
    public function render($notification)
    {
        $componentMap = [
            'message' => 'notifications.message',
            'friend_request' => 'notifications.friend-request',
            'order_update' => 'notifications.order-update',
        ];

        $component = $componentMap[$notification->type] ?? 'notifications.default';

        return view()->make('components.' . $component, [
            'notification' => $notification
        ]);
    }
}

<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
    <!-- كومة الأنماط -->
    @stack('styles')
</head>
<body>
    {{ $slot }}

    <!-- كومة السكريبتات -->
    @stack('scripts')
</body>
</html>

<!-- resources/views/components/chart.blade.php -->
<div class="chart" id="chart-{{ $id }}"></div>

@once
    @push('styles')
        <link rel="stylesheet" href="/css/charts.css">
    @endpush

    @push('scripts')
        <script src="/js/chart.js"></script>
    @endpush
@endonce

@push('scripts')
<script>
    initChart('{{ $id }}', @json($data));
</script>
@endpush

<!-- resources/views/components/forms/input.blade.php -->
@props([
    'name',
    'label' => null,
    'type' => 'text',
    'value' => '',
    'placeholder' => '',
    'required' => false,
    'disabled' => false,
])

<div class="form-group mb-4">
    @if($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-gray-700 mb-2">
            {{ $label }}
            @if($required)
                <span class="text-red-500">*</span>
            @endif
        </label>
    @endif

    <input
        type="{{ $type }}"
        name="{{ $name }}"
        id="{{ $name }}"
        value="{{ old($name, $value) }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->class([
            'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500',
            'border-red-500' => $errors->has($name),
            'border-gray-300' => !$errors->has($name),
        ]) }}
    >

    @error($name)
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

<!-- resources/views/components/forms/select.blade.php -->
@props([
    'name',
    'label' => null,
    'options' => [],
    'selected' => null,
    'placeholder' => 'اختر خياراً',
    'required' => false,
])

<div class="form-group mb-4">
    @if($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-gray-700 mb-2">
            {{ $label }}
            @if($required) <span class="text-red-500">*</span> @endif
        </label>
    @endif

    <select
        name="{{ $name }}"
        id="{{ $name }}"
        {{ $required ? 'required' : '' }}
        {{ $attributes->class([
            'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500',
            'border-red-500' => $errors->has($name),
            'border-gray-300' => !$errors->has($name),
        ]) }}
    >
        <option value="">{{ $placeholder }}</option>
        @foreach($options as $value => $text)
            <option value="{{ $value }}" {{ old($name, $selected) == $value ? 'selected' : '' }}>
                {{ $text }}
            </option>
        @endforeach
    </select>

    @error($name)
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

<!-- استخدام مكونات النماذج -->
<form method="POST" action="/users">
    @csrf

    <x-forms.input
        name="name"
        label="الاسم الكامل"
        placeholder="أدخل اسمك الكامل"
        required
    />

    <x-forms.input
        name="email"
        type="email"
        label="عنوان البريد الإلكتروني"
        placeholder="your@email.com"
        required
    />

    <x-forms.select
        name="country"
        label="الدولة"
        :options="$countries"
        :selected="$user->country ?? null"
        required
    />

    <x-button type="submit" variant="primary">إنشاء مستخدم</x-button>
</form>