Slots and Advance Component Features Tutorial in Laravel 11

 <?php

namespace App\View\Components;

use Closure;

use Illuminate\Contracts\View\View;

use Illuminate\Support\HtmlString;

use Illuminate\View\Component;

class Alert extends Component

{

    public $type;

    public $dismissible;

    protected $types = [

        "success",

        "danger",

        "info"

    ];

    /**

     * Create a new component instance.

     */

    public function __construct(string $type = "info", $dismissible = false)

    {

        $this->type = $type;

        $this->dismissible = $dismissible;

    }

    public function validType()

    {

        return in_array($this->type, $this->types) ? $this->type : "info";

    }

    public function link($text, $target = "#")

    {

        return new HtmlString("<a href='$target' class='alert-link'>$text</a>");

    }

    /**

     * Get the view / contents that represent the component.

     */

    public function render(): View|Closure|string

    {

        return view('components.alert');

        // Making inline component as shown below :

        // return <<< 'blade'

        //     <div {{ $attributes->class(["alert-dismissible fade show" => $dismissible])->merge(["class" => "alert alert-".$validType,"role"=>$attributes->prepends("alert")]) }}>

        //         @isset($title)

        //         {{-- "$attributes->class(["alert-heading"])" is the default class --}}

        //             <h4 {{ $title->attributes->class(["alert-heading"]) }}>{{ $title }}</h4>

        //             <hr>

        //         @endisset

        //         @if($slot->isEmpty())

        //             <p>This is default content if the slot is empty.</p>

        //         @else

        //             {{ $slot }}

        //         @endif

        //         @if($dismissible)

        //             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

        //         @endif

        //     </div>

        // blade;

    }

}

Above File is app\View\Components\Alert File

Below File is app\View\Components\card File

<?php

namespace App\View\Components;

use Closure;

use Illuminate\Contracts\View\View;

use Illuminate\View\Component;

class card 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 <<<'blade'

            <div class="card" style="width: 18rem;">

                <img src="..." class="card-img-top" alt="...">

                <div class="card-body">

                    <h5 class="card-title">Card title</h5>

                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                    <a href="#" class="btn btn-primary">Go somewhere</a>

                </div>

            </div>

        blade;

    }

}

Below File is resources\views\components\alert File

<div {{ $attributes->class(["alert-dismissible fade show" => $dismissible])->merge(["class" => "alert alert-".$validType,"role"=>$attributes->prepends("alert")]) }}>

    @isset($title)

    {{-- "$attributes->class(["alert-heading"])" is the default class --}}

        <h4 {{ $title->attributes->class(["alert-heading"]) }}>{{ $title }}</h4>

        <hr>

    @endisset

    @if($slot->isEmpty())

        <p>This is default content if the slot is empty.</p>

    @else

        {{ $slot }}

    @endif

    @if($dismissible)

        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

    @endif

</div>

Below File is resources\views\components\form File

{{-- Below properties method "@props()" is used only when we have not created any class File separately --}}

{{-- Below "action" and "method" are dynamic properties and user will send its value --}}

@props([

    "action",

    "method" => "POST"

])

<form action="{{ $action }}" method="{{ $method === "GET" ? "GET" : "POST"}}" {{ $attributes }}>

    @csrf

    @unless(in_array($method,["GET","POST"]))

        @method($method)

    @endunless

    {{-- @method("PUT") --}}

    {{ $slot }}

</form>

Below File is resources\views\welcomeTwo File

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Components</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

</head>

<body>

    <x-alert type="danger">

            {{-- <x-slot name="title"> --}}

            <x-slot:title class="font-bold">

                Heading goes here ----

                {{ $component->link("Just Testing","https://www.google.com/") }}

            </x-slot>

            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

            </p>

    </x-alert>

    {{-- Below is inline component --}}

    {{-- <x-card/> --}}

    @php

        $componentName = "alert";

    @endphp

    <x-dynamic-component :component="$componentName" class="m-4"/>

    <x-form action="/somepage" method="PUT" id="firstform" class="myform">

        <input type="text" name="name">

        <button type="submit">Save</button>

    </x-form>

</body>

</html>

Below File is routes\web File

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

    return view('welcome');

});

Route::get("/welcomeTwo", function () {

    return view("welcomeTwo");

});