Laravel Bladeのコンポーネントを使用して同じ記述の簡略化をする

開発環境

Laravel 10

今回やりたいこと

laravelでログイン機能を作成する際に
同じ記述が続いたのでBladeのコンポーネントを使用してまとめてみました

form.php

        <form method="post">
            @csrf

            // こっから下が被っている
            <label class="p-gird__signin-label">
                <p class="c-text__label u-pb-1">名前</p>
                <input type="text" class="c-form__text">
            </label>

            <label class="p-gird__signin-label">
                <p class="c-text__label u-pb-1">メールアドレス</p>
                <input type="text" class="c-form__text">
            </label>

            <label class="p-gird__signin-label">
                <p class="c-text__label u-pb-1">パスワード</p>
                <input type="text" class="c-form__text">
            </label>

            <button class="c-button__main p-button__form">送信</button>
        </form>

コンポーネントの作成

下記のコマンドで App/Views/Components/Forms/にInput.phpファイルが作られる
ビューファイルは resources/views/components/forms/にinput.blade.phpファイルが作られる

php artisan make:component Forms/Input

コンポーネントのレンダリング

xで始まってケバブケース名で書かれる
App/Views/Components/ディレクトリ内よりネストしているよりネストしている場合
.を使って表記する

<x-forms.input />

コンポーネントへのデータ渡し

コンストラクターに記述することでコンポーネントのビューにデータを渡すことができる。

App/Views/Components/Forms/Input.php

class Input extends Component{
    public function __construct(
        
        public string $label,
        public string $name,
        public string $type = "text"
    ){}

    public function render(): View|Closure|string
    {
        return view('components.forms.input');
    }
}

コンポーネントを変更する。

input.blade.php

    <div>
        <label class="p-gird__signin-label">
            <p class="c-text__label u-pb-1">{{ $label }}</p>
            <input type="{{ $type }}" class="c-form__text" name="{{ $name }}">
        </label>
    </div>

form.php

       <form method="post">
            @csrf

            <x-form.input label="名前" name="name"/>

            <x-form.input label="メールアドレス" name="email"/>

            <x-form.input label="パスワード" name="password"/>

            <button class="c-button__main p-button__form">送信</button>
        </form>