Refactor to component layouts

resources/views/auth/login.blade.php

@@ -1,13 +1,11 @@
-@extends('layouts.auth', ['title' => 'Sign in to your account'])
+<x-layouts.auth :title="__('Sign in to your account')">
+    <x-slot name="description">
+        Or
+        <a href="{{ route('register') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+            register a new account
+        </a>
+    </x-slot>
 
-@section('description')
-    Or
-    <a href="{{ route('register') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
-        register a new account
-    </a>
-@endsection
-
-@section('content')
     <x-form :action="route('login')">
         <div>
             <x-label for="email" class="block text-sm font-medium leading-5 text-gray-700"/>
@@ -55,4 +53,4 @@
             </span>
         </div>
     </x-form>
-@endsection
+</x-layouts.auth>

resources/views/auth/passwords/confirm.blade.php

@@ -1,10 +1,8 @@
-@extends('layouts.auth', ['title' => __('Confirm Password')])
+<x-layouts.auth :title="__('Confirm Password')">
+    <x-slot name="description">
+        {{ __('Please confirm your password before continuing.') }}
+    </x-slot>
 
-@section('description')
-    {{ __('Please confirm your password before continuing.') }}
-@endsection
-
-@section('content')
     <x-form :action="route('password.confirm')">
         <div>
             <x-label for="password" class="block text-sm font-medium leading-5 text-gray-700"/>
@@ -31,4 +29,4 @@
             </a>
         </div>
     </x-form>
-@endsection
+</x-layouts.auth>

resources/views/auth/passwords/email.blade.php

@@ -1,13 +1,11 @@
-@extends('layouts.auth', ['title' => __('Reset Password')])
+<x-layouts.auth :title="__('Reset Password')">
+    <x-slot name="description">
+        Or
+        <a href="{{ route('login') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+            go back to login
+        </a>
+    </x-slot>
 
-@section('description')
-    Or
-    <a href="{{ route('login') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
-        go back to login
-    </a>
-@endsection
-
-@section('content')
     <x-form :action="route('password.email')">
         <div>
             <x-label for="email" class="block text-sm font-medium leading-5 text-gray-700"/>
@@ -28,4 +26,4 @@
             </span>
         </div>
     </x-form>
-@endsection
+</x-layouts.auth>

resources/views/auth/passwords/reset.blade.php

@@ -1,6 +1,4 @@
-@extends('layouts.auth', ['title' => __('Reset Password')])
-
-@section('content')
+<x-layouts.auth :title="__('Reset Password')">
     <x-form :action="route('password.update')">
         <input type="hidden" name="token" value="{{ $token }}">
 
@@ -42,4 +40,4 @@
             </span>
         </div>
     </x-form>
-@endsection
+</x-layouts.auth>

resources/views/auth/register.blade.php

@@ -1,13 +1,11 @@
-@extends('layouts.auth', ['title' => 'Register a new account'])
+<x-layouts.auth :title="__('Register a new account')">
+    <x-slot name="description">
+        Or
+        <a href="{{ route('login') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+            sign in to your account
+        </a>
+    </x-slot>
 
-@section('description')
-    Or
-    <a href="{{ route('login') }}" class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
-        sign in to your account
-    </a>
-@endsection
-
-@section('content')
     <x-form :action="route('register')">
         <div>
             <x-label for="name" class="block text-sm font-medium leading-5 text-gray-700"/>
@@ -61,4 +59,4 @@
             </span>
         </div>
     </x-form>
-@endsection
+</x-layouts.auth>

resources/views/auth/verify.blade.php

@@ -1,11 +1,9 @@
-@extends('layouts.auth', ['title' => __('Verify Your Email Address')])
+<x-layouts.auth :title="__('Verify Your Email Address')">
+    <x-slot name="description">
+        {{ __('Before proceeding, please check your email for a verification link.') }}
+        {{ __('If you did not receive the email, click the button below to request another one.') }}
+    </x-slot>
 
-@section('description')
-    {{ __('Before proceeding, please check your email for a verification link.') }}
-    {{ __('If you did not receive the email, click the button below to request another one.') }}
-@endsection
-
-@section('content')
     <x-form :action="route('verification.resend')">
         <div class="mt-6">
             <span class="block w-full rounded-md shadow-sm">
@@ -15,5 +13,5 @@
             </span>
         </div>
     </x-form>
-@endsection
+</x-layouts.auth>
 

resources/views/components/layouts/app.blade.php

@@ -0,0 +1,5 @@
+<x-layouts.base :title="$title">
+    <x-layouts.navigation />
+
+    {{ $slot }}
+</x-layouts.base>

resources/views/layouts/auth.blade.php → resources/views/components/layouts/auth.blade.php

@@ -1,19 +1,19 @@
-@extends('layouts.base')
-
-@section('body')
+<x-layouts.base :title="$title">
     <div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
         <div class="sm:mx-auto sm:w-full sm:max-w-md">
-            <x-heroicon-o-globe class="mx-auto h-12 w-auto text-indigo-600"/>
+            <a href="{{ route('welcome') }}">
+                <x-heroicon-o-globe class="mx-auto h-12 w-auto text-indigo-600"/>
+            </a>
 
             <h2 class="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
                 {{ $title }}
             </h2>
 
-            @hasSection('description')
+            @isset($description)
                 <p class="mt-2 text-center text-sm leading-5 text-gray-600 max-w">
-                    @yield('description')
+                    {{ $description }}
                 </p>
-            @endif
+            @endisset
 
             <x-alert type="status" class="rounded-md bg-yellow-50 text-sm leading-5 font-medium text-yellow-800 p-4 mt-8">
                 <x-heroicon-o-exclamation-circle class="h-5 w-5 inline-block mr-1"/>
@@ -23,8 +23,8 @@
 
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
             <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-                @yield('content')
+                {{ $slot }}
             </div>
         </div>
     </div>
-@endsection
+</x-layouts.base>

resources/views/layouts/base.blade.php → resources/views/components/layouts/base.blade.php

@@ -1,4 +1,7 @@
-<x-html class="bg-white h-screen antialiased leading-none">
+<x-html
+    :title="isset($title) ? $title . ' | ' . config('app.name') : ''"
+    class="bg-white h-screen antialiased leading-none"
+>
     <x-slot name="head">
         <x-social-meta
             title="{{ $component->title() }}"
@@ -14,9 +17,9 @@
         @bukStyles
     </x-slot>
 
-    @yield('body')
+    {{ $slot }}
 
-    @include('layouts.footer')
+    <x-layouts.footer />
 
     @livewireScripts
     @bukScripts

resources/views/layouts/navigation.blade.php → resources/views/components/layouts/navigation.blade.php

@@ -62,7 +62,7 @@
     -->
     <div class="hidden sm:hidden">
         <div class="pt-2 pb-3">
-            <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-indigo-500 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out">Dashboard</a>
+            <a href="{{ route('home') }}" class="block pl-3 pr-4 py-2 border-l-4 border-indigo-500 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out">Dashboard</a>
             <a href="#" class="mt-1 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out">Destinations</a>
         </div>
         <div class="pt-4 pb-3 border-t border-gray-200">

resources/views/home.blade.php

@@ -1,6 +1,4 @@
-@extends('layouts.app')
-
-@section('content')
+<x-layouts.app :title="__('Dashboard')">
     <div class="bg-gray-50 py-10">
         <header>
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-6">
@@ -197,4 +195,4 @@
             </div>
         </main>
     </div>
-@endsection
+</x-layouts.app>

resources/views/settings.blade.php

@@ -1,6 +1,4 @@
-@extends('layouts.app')
-
-@section('content')
+<x-layouts.app :title="__('Settings')">
     <div class="bg-gray-50 py-10">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <x-alert class="rounded-md bg-green-100 text-sm leading-5 font-medium text-green-700 p-4 mt-8 mb-10">
@@ -71,4 +69,4 @@
             </div>
         </div>
     </div>
-@endsection
+</x-layouts.app>>

resources/views/welcome.blade.php

@@ -1,6 +1,4 @@
-@extends('layouts.base')
-
-@section('body')
+<x-layouts.base>
     <div class="relative bg-white overflow-hidden">
         <div class="max-w-screen-xl mx-auto">
             <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
@@ -246,4 +244,4 @@ class="form-input block w-full pr-10 sm:text-xl sm:leading-8"
             </div>
         </div>
     </div>
-@endsection
+</x-layouts.base>