initial commit

resources/css/app.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Alpine */
+[x-cloak] {
+	display: none !important;
+}

resources/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+</svg>

resources/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+</svg>

resources/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+</svg>

resources/icons/clock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>

resources/icons/cross.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+</svg>

resources/icons/exclamation-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>

resources/icons/exclamation.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+</svg>

resources/icons/fire.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
+</svg>

resources/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+</svg>

resources/icons/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+</svg>

resources/icons/shield-exclamation.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
+</svg>

resources/js/app.js

@@ -0,0 +1,6 @@
+require('./bootstrap');
+
+// Alpine
+import Alpine from 'alpinejs'
+window.Alpine = Alpine
+Alpine.start()

resources/js/bootstrap.js

@@ -0,0 +1,28 @@
+window._ = require('lodash');
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });

resources/lang/en/auth.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'These credentials do not match our records.',
+    'password' => 'The provided password is incorrect.',
+    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
+
+];

resources/lang/en/authorization.php

@@ -0,0 +1,18 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authorization Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'character.limit' => 'You are only allowed to create :limit amount of characters.',
+
+];

resources/lang/en/pagination.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Previous',
+    'next' => 'Next &raquo;',
+
+];

resources/lang/en/validation.php

@@ -0,0 +1,156 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => 'The :attribute must be accepted.',
+    'active_url' => 'The :attribute is not a valid URL.',
+    'after' => 'The :attribute must be a date after :date.',
+    'after_or_equal' => 'The :attribute must be a date after or equal to :date.',
+    'alpha' => 'The :attribute must only contain letters.',
+    'alpha_dash' => 'The :attribute must only contain letters, numbers, dashes and underscores.',
+    'alpha_num' => 'The :attribute must only contain letters and numbers.',
+    'array' => 'The :attribute must be an array.',
+    'before' => 'The :attribute must be a date before :date.',
+    'before_or_equal' => 'The :attribute must be a date before or equal to :date.',
+    'between' => [
+        'numeric' => 'The :attribute must be between :min and :max.',
+        'file' => 'The :attribute must be between :min and :max kilobytes.',
+        'string' => 'The :attribute must be between :min and :max characters.',
+        'array' => 'The :attribute must have between :min and :max items.',
+    ],
+    'boolean' => 'The :attribute field must be true or false.',
+    'confirmed' => 'The :attribute confirmation does not match.',
+    'current_password' => 'The password is incorrect.',
+    'date' => 'The :attribute is not a valid date.',
+    'date_equals' => 'The :attribute must be a date equal to :date.',
+    'date_format' => 'The :attribute does not match the format :format.',
+    'different' => 'The :attribute and :other must be different.',
+    'digits' => 'The :attribute must be :digits digits.',
+    'digits_between' => 'The :attribute must be between :min and :max digits.',
+    'dimensions' => 'The :attribute has invalid image dimensions.',
+    'distinct' => 'The :attribute field has a duplicate value.',
+    'email' => 'The :attribute must be a valid email address.',
+    'ends_with' => 'The :attribute must end with one of the following: :values.',
+    'exists' => 'The selected :attribute is invalid.',
+    'file' => 'The :attribute must be a file.',
+    'filled' => 'The :attribute field must have a value.',
+    'gt' => [
+        'numeric' => 'The :attribute must be greater than :value.',
+        'file' => 'The :attribute must be greater than :value kilobytes.',
+        'string' => 'The :attribute must be greater than :value characters.',
+        'array' => 'The :attribute must have more than :value items.',
+    ],
+    'gte' => [
+        'numeric' => 'The :attribute must be greater than or equal :value.',
+        'file' => 'The :attribute must be greater than or equal :value kilobytes.',
+        'string' => 'The :attribute must be greater than or equal :value characters.',
+        'array' => 'The :attribute must have :value items or more.',
+    ],
+    'image' => 'The :attribute must be an image.',
+    'in' => 'The selected :attribute is invalid.',
+    'in_array' => 'The :attribute field does not exist in :other.',
+    'integer' => 'The :attribute must be an integer.',
+    'ip' => 'The :attribute must be a valid IP address.',
+    'ipv4' => 'The :attribute must be a valid IPv4 address.',
+    'ipv6' => 'The :attribute must be a valid IPv6 address.',
+    'json' => 'The :attribute must be a valid JSON string.',
+    'lt' => [
+        'numeric' => 'The :attribute must be less than :value.',
+        'file' => 'The :attribute must be less than :value kilobytes.',
+        'string' => 'The :attribute must be less than :value characters.',
+        'array' => 'The :attribute must have less than :value items.',
+    ],
+    'lte' => [
+        'numeric' => 'The :attribute must be less than or equal :value.',
+        'file' => 'The :attribute must be less than or equal :value kilobytes.',
+        'string' => 'The :attribute must be less than or equal :value characters.',
+        'array' => 'The :attribute must not have more than :value items.',
+    ],
+    'max' => [
+        'numeric' => 'The :attribute must not be greater than :max.',
+        'file' => 'The :attribute must not be greater than :max kilobytes.',
+        'string' => 'The :attribute must not be greater than :max characters.',
+        'array' => 'The :attribute must not have more than :max items.',
+    ],
+    'mimes' => 'The :attribute must be a file of type: :values.',
+    'mimetypes' => 'The :attribute must be a file of type: :values.',
+    'min' => [
+        'numeric' => 'The :attribute must be at least :min.',
+        'file' => 'The :attribute must be at least :min kilobytes.',
+        'string' => 'The :attribute must be at least :min characters.',
+        'array' => 'The :attribute must have at least :min items.',
+    ],
+    'multiple_of' => 'The :attribute must be a multiple of :value.',
+    'not_in' => 'The selected :attribute is invalid.',
+    'not_regex' => 'The :attribute format is invalid.',
+    'numeric' => 'The :attribute must be a number.',
+    'password' => 'The password is incorrect.',
+    'present' => 'The :attribute field must be present.',
+    'regex' => 'The :attribute format is invalid.',
+    'required' => 'The :attribute field is required.',
+    'required_if' => 'The :attribute field is required when :other is :value.',
+    'required_unless' => 'The :attribute field is required unless :other is in :values.',
+    'required_with' => 'The :attribute field is required when :values is present.',
+    'required_with_all' => 'The :attribute field is required when :values are present.',
+    'required_without' => 'The :attribute field is required when :values is not present.',
+    'required_without_all' => 'The :attribute field is required when none of :values are present.',
+    'prohibited' => 'The :attribute field is prohibited.',
+    'prohibited_if' => 'The :attribute field is prohibited when :other is :value.',
+    'prohibited_unless' => 'The :attribute field is prohibited unless :other is in :values.',
+    'same' => 'The :attribute and :other must match.',
+    'size' => [
+        'numeric' => 'The :attribute must be :size.',
+        'file' => 'The :attribute must be :size kilobytes.',
+        'string' => 'The :attribute must be :size characters.',
+        'array' => 'The :attribute must contain :size items.',
+    ],
+    'starts_with' => 'The :attribute must start with one of the following: :values.',
+    'string' => 'The :attribute must be a string.',
+    'timezone' => 'The :attribute must be a valid zone.',
+    'unique' => 'The :attribute has already been taken.',
+    'uploaded' => 'The :attribute failed to upload.',
+    'url' => 'The :attribute format is invalid.',
+    'uuid' => 'The :attribute must be a valid UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [],
+
+];

resources/views/auth/login.blade.php

@@ -0,0 +1,11 @@
+<x-layout name="auth">
+
+    <h1 class="text-gray-500 text-3xl text-center mb-4">Login</h1>
+
+    <x-form action="{{ route('auth.login.store') }}">
+        <x-input name="username" placeholder="{{ __('Username') }}" class="mb-2"/>
+        <x-input-password placeholder="{{ __('Password') }}" class="mb-2" />
+        <x-button element="input" type="submit" name="submit" value="Login" class="w-full" />
+    </x-form>
+
+</x-layout>

resources/views/character/create.blade.php

@@ -0,0 +1,9 @@
+<x-layout name="app">
+
+<x-slot name="title">{{ __('Add character') }}</x-slot>
+
+<div class="p-6 mx-auto max-w-xl">
+    <livewire:form.create-character-form>
+</div>
+
+</x-layout>

resources/views/character/list.blade.php

@@ -0,0 +1,11 @@
+<x-layout name="app">
+
+<x-slot name="title">{{ __('Roster') }}</x-slot>
+
+<div class="grid sm:grid-cols-2 lg:grid-cols-3 p-4 gap-4">
+    @foreach($items as $item)
+    <x-character-card :character="$item" />
+    @endforeach
+</div>
+
+</x-layout>

resources/views/character/profession/create.blade.php

@@ -0,0 +1,27 @@
+<x-layout name="app">
+
+<x-slot name="title">
+    <div class="flex">
+        <x-class-icon class="w-8 h-8 mr-2" :name="$character->class" />
+        {{ $character->name }}
+        -
+        {{ __('Import Profession') }}
+    </div>
+</x-slot>
+
+<div class="mx-auto max-w-sm p-4">
+    <p>Download this <x-link href="https://www.curseforge.com/wow/addons/professions-exporter" target="_blank">exporter addon</x-link>
+
+    <x-form action="{{ route('character.profession.store', [ 'character' => $character->slug ]) }}">
+        <div class="mb-2">
+            <x-form.label for="data">{{ __('Import string') }}</x-form.label>
+            <x-textarea class="h-64" name="data" />
+        </div>
+
+        <div class="mt-2">
+            <x-button element="input" type="submit" value="{{ __('Import') }}" />
+        </div>
+    </x-form>
+</div>
+
+</x-layout>

resources/views/character/profession/show.blade.php

@@ -0,0 +1,46 @@
+<x-layout name="app">
+
+<x-slot name="title">
+    <div class="flex">
+        {{ __('Character') }} -
+        <x-class-icon class="w-8 h-8 mx-2" :name="$ch_prof->character->class" />
+        {{ $ch_prof->character->level }} {{ $ch_prof->character->name }}
+    </div>
+</x-slot>
+
+<div class="p-4">
+
+    <x-section-heading>
+        <div class="flex items-end">
+            <x-profession-icon :name="$ch_prof->profession->name" class="h-8 w-8 mr-2"/>
+            <h2 class="text-3xl">{{ $ch_prof->profession->name }}</h2>
+            <h3 class="text-xl ml-2">{{ $ch_prof->skill }}</h3>
+        </div>
+    </x-section-heading>
+
+
+    @php
+    $recipes = $ch_prof->recipes
+        ->sortBy('craft.name')
+        ->groupBy('category.name')
+        ->sortKeys();
+    @endphp
+
+    @foreach($recipes as $category => $recipes)
+    <span x-data="{ open: true }">
+        <h2 class="flex items-center my-2 text-2xl cursor-pointer hover:text-gray-600" @click="open = ! open">
+            <x-icon name="chevron-right" class="h-6 w-6" x-show="!open" x-cloak />
+            <x-icon name="chevron-down" class="h-6 w-6" x-show="open" />
+            {{ $category }}
+        </h2>
+        <ul class="ml-2 space-y-2" x-show="open" x-transition>
+            @foreach($recipes as $recipe)
+            <li><x-link href="{{ route('recipe.show', [ 'recipe' => $recipe ]) }}">{{ $recipe->name }}</x-link></li>
+            @endforeach
+        </ul>
+    </span>
+    @endforeach
+
+</div>
+
+</x-layout>

resources/views/character/show.blade.php

@@ -0,0 +1,37 @@
+<x-layout name="app">
+
+<x-slot name="title">
+    <div class="flex">
+        {{ __('Character') }} -
+        <x-class-icon class="w-8 h-8 mx-2" :name="$character->class" />
+        {{ $character->level }} {{ $character->name }}
+    </div>
+</x-slot>
+
+<div class="p-4">
+
+    <x-section-heading>
+        <h2 class="text-3xl">Professions</h2>
+        <div>
+            @can('import_profession', $character)
+            <x-button element="a" class="flex items-center" href="{{ route('character.profession.create', [ 'character' => $character->slug ]) }}">
+                <x-icon name="plus" class="h-6 h-6 mr-1"/> {{ __('Import') }}
+            </x-button>
+            @endcan
+        </div>
+    </x-section-heading>
+
+    <ul class="space-y-2">
+        @foreach($character->professions as $profession)
+        <li class="flex items-center">
+            <x-profession-icon :name="$profession->name" class="h-8 w-8 mr-2"/>
+            <x-link href="{{ route('character.profession.show', [ 'character' => $character->slug, 'profession' => $profession->slug ]) }}">
+                {{ $profession->name }}
+            </x-link>
+            <span class="ml-1">@ {{ $profession->skill }}</span>
+        </li>
+        @endforeach
+    </ul>
+</div>
+
+</x-layout>

resources/views/components/alert.blade.php

@@ -0,0 +1,5 @@
+@props(['type', 'message'])
+
+<div class="px-4 py-2 rounded border text-{{ $type }}-800 bg-{{ $type }}-200 border-{{ $type }}-300">
+    {!! $message !!}
+</div>

resources/views/components/button.blade.php

@@ -0,0 +1,3 @@
+@props(['element' => 'button'])
+
+<{{ $element }} {{ $attributes->merge(['class' => 'cursor-pointer inline-block text-white bg-indigo-400 px-3 py-1 rounded transition-colors hover:bg-indigo-500']) }}>{{ $slot}}</{{ $element }}>

resources/views/components/character-card.blade.php

@@ -0,0 +1,27 @@
+@props(['character', 'destroy' => false])
+
+<div class="flex justify-between rounded p-2 bg-class-{{ $character->class }}">
+    <div>
+        <div class="flex items-center">
+            <x-class-icon class="w-8 h-8" :name="$character->class" />
+            <a href="{{ route('character.show', ['character' => $character ]) }}" class="text-2xl ml-2">{{ $character->level }} {{ $character->name }}</a>
+        </div>
+        <p>{{ Str::ucfirst($character->class) }}</p>
+    </div>
+
+    <div class="flex gap-1">
+        @foreach($character->professions as $ch_prof)
+        <a href="{{ route('character.profession.show', [ 'character' => $character, 'profession' => $ch_prof->profession ]) }}">
+            <x-profession-icon class="border border-black rounded-full w-6 h-6" :name="$ch_prof->name" />
+        </a>
+        @endforeach
+
+        @if ($destroy)
+        <x-form :action="$destroy" method="DELETE">
+            <a href="#" onclick="this.closest('form').submit();return false;">
+                <x-icon name="cross" class="h-6 h-6 text-gray-100 rounded bg-black bg-opacity-25 hover:text-gray-200 hover:bg-opacity-30 "/>
+            </a>
+        </x-form>
+        @endif
+    </div>
+</div>

resources/views/components/character-link.blade.php

@@ -0,0 +1,6 @@
+@props(['href', 'character', 'iconsize' => 5])
+
+<x-link {{ $attributes->merge(['class' => 'flex items-center', 'href' => $href ]) }}>
+    <x-class-icon class="w-{{ $iconsize }} h-{{ $iconsize }} mr-1" :name="$character->class" />
+    <span>{{ $character->name }}</span>
+</x-link>

resources/views/components/class-icon.blade.php

@@ -0,0 +1 @@
+<img {{ $attributes->merge(['src' => $url, 'class' => 'border border-black rounded-full']) }}/>

resources/views/components/empty-result.blade.php

@@ -0,0 +1,7 @@
+@props(['title' => false])
+<div {{ $attributes->merge(['class' => 'select-none text-center py-6 border rounded text-gray-500 bg-gray-100 border-gray-200']) }}>
+    @if ($title)
+    <h2 class="text-3xl mb-2">{{ $title }}</h2>
+    @endif
+    <p>{{ $slot }}</p>
+</div>

resources/views/components/form/form.blade.php

@@ -0,0 +1,11 @@
+<form {!! $attributes->merge(['method' => $method]) !!}>
+@unless(in_array($method, ['HEAD', 'GET', 'OPTIONS']))
+    @csrf
+@endunless
+
+@if($spoofMethod)
+    @method($spoofMethod)
+@endif
+
+    {!! $slot !!}
+</form>

resources/views/components/form/inputs/input.blade.php

@@ -0,0 +1,7 @@
+
+<input type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"
+    {{ $attributes->merge(['class' => ($errors->has($name) ? 'border-red-400 ' : '') . 'w-full border rounded px-2 py-1 focus:ring-2']) }} {{ $disabled }} />
+
+@error($name)
+<p class="ml-2 text-red-400 text-sm">{{ $message }}</p>
+@enderror

resources/views/components/form/inputs/select.blade.php

@@ -0,0 +1,9 @@
+<select {!! $attributes->merge(['class' => 'w-full border rounded p-1 focus:ring-2']) !!}>
+    @forelse($options as $key => $option)
+        <option value="{{ $key }}">
+            {{ $option }}
+        </option>
+    @empty
+        {!! $slot !!}
+    @endforelse
+</select>

resources/views/components/form/inputs/textarea.blade.php

@@ -0,0 +1,7 @@
+
+<textarea name="{{ $name }}"
+    {{ $attributes->merge(['class' => ($errors->has($name) ? 'border-red-400 ' : '') . 'w-full border rounded px-2 py-1 focus:ring-2']) }} {{ $disabled }}>{{ $value }}</textarea>
+
+@error($name)
+<p class="ml-2 text-red-400 text-sm">{{ $message }}</p>
+@enderror

resources/views/components/form/label.blade.php

@@ -0,0 +1 @@
+<label {{ $attributes->merge(['class' => 'text-sm']) }}>{{ $slot }}</label>

resources/views/components/link.blade.php

@@ -0,0 +1 @@
+<a {{ $attributes->merge(['class' => 'text-indigo-400 hover:underline']) }}>{{ $slot}}</a>

resources/views/components/nav-link.blade.php

@@ -0,0 +1,14 @@
+@props(['active' => false])
+@php
+
+$classes = 'cursor-pointer px-2 py-1 rounded xl:flex items-center text-sm tracking-normal hidden';
+
+if ($active) {
+    $classes .= ' bg-gray-900 text-indigo-300';
+} else {
+    $classes .= ' text-white hover:text-indigo-300 hover:bg-gray-900';
+}
+
+@endphp
+
+<li><a {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</a></li>

resources/views/components/notifications.blade.php

@@ -0,0 +1,7 @@
+@if ($messages)
+<div class="px-4 pt-4 space-y-2">
+    @foreach($messages as $type => $message)
+    <x-alert :type="$type" :message=$message />
+    @endforeach
+</div>
+@endif

resources/views/components/profession-icon.blade.php

@@ -0,0 +1,3 @@
+<div>
+    <!-- The only way to do great work is to love what you do. - Steve Jobs -->
+</div>

resources/views/components/section-heading.blade.php

@@ -0,0 +1,3 @@
+<div class="flex items-end justify-between px-2 py-2 mb-2 border-b">
+    {{ $slot }}
+</div>

resources/views/errors/401.blade.php

@@ -0,0 +1,8 @@
+<x-layout name="error">
+
+<x-slot name="icon">shield-exclamation</x-slot>
+<x-slot name="title">{{ __('Unauthorized') }}</x-slot>
+
+{{ __($exception->getMessage() ?: 'You are not allowed to access this page.') }}
+
+</x-layout>

resources/views/errors/403.blade.php

@@ -0,0 +1,8 @@
+<x-layout name="error">
+
+<x-slot name="icon">shield-exclamation</x-slot>
+<x-slot name="title">{{ __('Forbidden') }}</x-slot>
+
+{{ __($exception->getMessage() ?: 'You are not allowed to access this page.') }}
+
+</x-layout>

resources/views/errors/404.blade.php

@@ -0,0 +1,9 @@
+<x-layout name="error">
+
+<x-slot name="icon">search</x-slot>
+<x-slot name="icon_color">text-blue-400</x-slot>
+<x-slot name="title">{{ __('Page not found') }}</x-slot>
+
+The page you are trying to access does not exist.
+
+</x-layout>

resources/views/errors/419.blade.php

@@ -0,0 +1,9 @@
+<x-layout name="error">
+
+<x-slot name="icon">clock</x-slot>
+<x-slot name="icon_color">text-blue-400</x-slot>
+<x-slot name="title">{{ __('Page expired.') }}</x-slot>
+
+{{ __('The page has expired. Please reload and try again.') }}
+
+</x-layout>

resources/views/errors/429.blade.php

@@ -0,0 +1,8 @@
+<x-layout name="error">
+
+<x-slot name="icon">exclamation</x-slot>
+<x-slot name="title">{{ __('Too Many Requests') }}</x-slot>
+
+{{ __('You have made too many requests under a short period of time. Please wait abit and try again.') }}
+
+</x-layout>

resources/views/errors/500.blade.php

@@ -0,0 +1,8 @@
+<x-layout name="error">
+
+<x-slot name="icon">fire</x-slot>
+<x-slot name="title">{{ __('Server Error') }}</x-slot>
+
+{{ __('The server encountered an error, please try again.') }}
+
+</x-layout>

resources/views/errors/503.blade.php

@@ -0,0 +1,9 @@
+<x-layout name="error">
+
+<x-slot name="icon">exclamation-circle</x-slot>
+<x-slot name="icon_color">text-blue-400</x-slot>
+<x-slot name="title">{{ __('Service Unavailable') }}</x-slot>
+
+{{ __('The service is not available at the moment, please try again later.') }}
+
+</x-layout>

resources/views/layouts/app.blade.php

@@ -0,0 +1,36 @@
+<x-layout class="bg-gray-200">
+
+    @include('partials.navigation')
+
+    <!-- Page title starts -->
+    <div class="relative z-10 bg-gray-800 pt-8 pb-16">
+        <div class="max-w-7xl px-6 mx-auto flex flex-col lg:flex-row items-start lg:items-center justify-between">
+            <div>
+                <h4 class="text-2xl font-bold leading-tight text-white">
+                    {{ $title }}
+                </h4>
+            </div>
+
+            @if (isset($page_links))
+            <div>
+                {{ $page_links }}
+            </div>
+            @endif
+        </div>
+    </div>
+    <!-- Page title ends -->
+
+    <!-- Main content -->
+    <div class="mx-4">
+        <main class="max-w-7xl min-h-16 mx-auto -mt-8 relative z-10 rounded shadow bg-white">
+
+            <x-notifications />
+
+            {{ $slot }}
+        </main>
+    </div>
+    <!-- Main content ends -->
+
+    @include('partials.footer')
+
+</x-layout>

resources/views/layouts/auth.blade.php

@@ -0,0 +1,10 @@
+<x-layout class="bg-gray-100">
+
+    <div class="mx-auto max-w-sm mt-48 border rounded p-4 bg-white">
+
+        <x-notifications />
+
+        {{ $slot }}
+    </div>
+
+</x-layout>

resources/views/layouts/default.blade.php

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>{{ config('app.name') }}</title>
+
+    <!-- Styles -->
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @livewireStyles
+</head>
+<body {{ $attributes->merge(['class' => 'antialiased']) }}>
+
+{{ $slot }}
+
+<!-- Scripts -->
+<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
+@livewireScripts
+
+</body>
+</html>

resources/views/layouts/error.blade.php

@@ -0,0 +1,17 @@
+<x-layout name="app">
+
+<x-slot name="title">
+    {{ __('Error') }} - {{ $title }}
+</x-slot>
+
+<div class="py-12 text-center text-gray-500">
+
+    @if (isset($icon))
+    <x-icon :name="$icon" class="h-24 w-24 mx-auto {{ $icon_color ?? 'text-red-500' }} mb-4" />
+    @endif
+
+    <h1 class="text-3xl mb-4">{{ $title }}</h1>
+    <p>{{ $slot }}</p>
+</div>
+
+</x-layout>

resources/views/livewire/form/character.blade.php

@@ -0,0 +1,38 @@
+
+<x-form wire:submit.prevent="save">
+
+    <div class="grid grid-cols-2 gap-4">
+
+        <div>
+            <x-form.label for="name">{{ __('Name') }}</x-form.label>
+            <x-input wire:model="name" name="name" label="name" />
+        </div>
+
+        <div>
+            <x-form.label for="level">{{ __('Level') }}</x-form.label>
+            <x-input wire:model="level" name="level" label="level" />
+        </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-4 mt-2">
+        <div>
+            <x-form.label for="race">{{ __('Race') }}</x-form.label>
+            <x-select wire:model="race" name="race" :options="$races" />
+        </div>
+
+        <div>
+            <x-form.label for="gender">{{ __('Gender') }}</x-form.label>
+            <x-select name="gender" :options="$genders" />
+        </div>
+
+        <div>
+            <x-form.label for="class" >{{ __('Class') }}</x-form.label>
+            <x-select wire:model="class" name="class" :options="$classes" />
+        </div>
+    </div>
+
+    <div class="mt-2">
+        <x-button element="input" type="submit" value="Save" />
+    </div>
+
+</x-form>

resources/views/livewire/recipes.blade.php

@@ -0,0 +1,50 @@
+<div>
+
+    <div class="grid grid-cols-3 gap-4 mb-2">
+        <x-input wire:model="name" name="name" placeholder="Recipe" />
+        <x-input wire:model="crafter" name="crafter" placeholder="Crafter" />
+        <x-select wire:model="profession" name="profession" :options="$profession_options" />
+    </div>
+
+    @if ($recipes->count())
+    <table class="w-full whitespace-nowrap">
+        <thead>
+            <tr tabindex="0" class="focus:outline-none w-full text-sm leading-none text-gray-800">
+                <th class="text-left px-3 py-4">Recipe</th>
+                <th class="text-left px-3 py-4">Profession</th>
+                <th class="text-left px-3 py-4">Crafters</th>
+            </tr>
+        </thead>
+        <tbody class="w-full">
+            @foreach($recipes as $recipe)
+            <tr class="focus:outline-none text-sm leading-none text-gray-800 bg-white hover:bg-gray-100 border-b border-t border-gray-100">
+                <td class="px-3 py-4"><x-link href="{{ route('recipe.show', [ 'recipe' => $recipe ]) }}">{{ $recipe->name }}</x-link></td>
+                <td class="px-3 py-4 flex items-center">
+                    <x-profession-icon class="w-4 h-4 mr-1" :name="$recipe->profession->name" />
+                    {{ $recipe->profession->name }}
+                </td>
+                <td class="px-3 py-4">
+                    @if ($recipe->crafters->count() > 0)
+                    <ul class="flex flex-wrap gap-2">
+                        @foreach($recipe->crafters as $crafter)
+                        <li>
+                            <x-character-link :character="$crafter" href="{{ route('character.profession.show', ['character' => $crafter, 'profession' => $recipe->profession ]) }}" />
+                        </li>
+                        @endforeach
+                    </ul>
+                    @else
+                    <span class="text-gray-400">{{ __('None') }}</span>
+                    @endif
+                </td>
+            </tr>
+            @endforeach
+        </tbody>
+    </table>
+
+    <div class="mt-4">
+        {{ $recipes->links() }}
+    </div>
+    @else
+    <x-empty-result>No recipes found</x-empty-result>
+    @endif
+</div>

resources/views/pagination/default.blade.php

@@ -0,0 +1,106 @@
+<div>
+    @if ($paginator->hasPages())
+        <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
+            <div class="flex justify-between flex-1 md:hidden">
+                <span>
+                    @if ($paginator->onFirstPage())
+                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                            {!! __('pagination.previous') !!}
+                        </span>
+                    @else
+                        <button wire:click="previousPage" wire:loading.attr="disabled" dusk="previousPage.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-indigo-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-indigo-700 transition ease-in-out duration-150">
+                            {!! __('pagination.previous') !!}
+                        </button>
+                    @endif
+                </span>
+
+                <span>
+                    @if ($paginator->hasMorePages())
+                        <button wire:click="nextPage" wire:loading.attr="disabled" dusk="nextPage.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-indigo-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-indigo-700 transition ease-in-out duration-150">
+                            {!! __('pagination.next') !!}
+                        </button>
+                    @else
+                        <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                            {!! __('pagination.next') !!}
+                        </span>
+                    @endif
+                </span>
+            </div>
+
+            <div class="hidden md:block md:mx-auto">
+                <div class="mb-2">
+                    <p class="text-center text-sm text-gray-700 leading-5">
+                        <span>{!! __('Showing') !!}</span>
+                        <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                        <span>{!! __('to') !!}</span>
+                        <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                        <span>{!! __('of') !!}</span>
+                        <span class="font-medium">{{ $paginator->total() }}</span>
+                        <span>{!! __('results') !!}</span>
+                    </p>
+                </div>
+
+                <div>
+                    <span class="relative z-0 inline-flex rounded-md shadow-sm">
+                        <span>
+                            {{-- Previous Page Link --}}
+                            @if ($paginator->onFirstPage())
+                                <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                        <x-icon name="chevron-left" class="w-5 h-5" />
+                                    </span>
+                                </span>
+                            @else
+                                <button wire:click="previousPage" dusk="previousPage.after" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-indigo-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                                    <x-icon name="chevron-left" class="w-5 h-5" />
+                                </button>
+                            @endif
+                        </span>
+
+                        {{-- Pagination Elements --}}
+                        @foreach ($elements as $element)
+                            {{-- "Three Dots" Separator --}}
+                            @if (is_string($element))
+                                <span aria-disabled="true">
+                                    <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                                </span>
+                            @endif
+
+                            {{-- Array Of Links --}}
+                            @if (is_array($element))
+                                @foreach ($element as $page => $url)
+                                    <span wire:key="paginator-page{{ $page }}">
+                                        @if ($page == $paginator->currentPage())
+                                            <span aria-current="page">
+                                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-indigo-400 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
+                                            </span>
+                                        @else
+                                            <button wire:click="gotoPage({{ $page }})" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-indigo-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                                {{ $page }}
+                                            </button>
+                                        @endif
+                                    </span>
+                                @endforeach
+                            @endif
+                        @endforeach
+
+                        <span>
+                            {{-- Next Page Link --}}
+                            @if ($paginator->hasMorePages())
+                                <button wire:click="nextPage" dusk="nextPage.after" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-indigo-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                                    <x-icon name="chevron-right" class="w-5 h-5" />
+                                </button>
+                            @else
+                                <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                                    <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                        <x-icon name="chevron-right" class="w-5 h-5" />
+                                    </span>
+                                </span>
+                            @endif
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </nav>
+    @endif
+</div>

resources/views/partials/footer.blade.php

@@ -0,0 +1,5 @@
+<footer class="max-w-7xl mx-auto px-8 py-4">
+    <p class="text-center text-gray-500 text-sm">
+        Copyright &copy; 2021 - <x-link href="https://www.shufflingpixels.com" target="_blank">shufflingpixels.com</x-link>
+    </p>
+</footer>

resources/views/partials/navigation.blade.php

@@ -0,0 +1,27 @@
+
+<!-- Navigation starts -->
+<nav class="w-full mx-auto bg-gray-800 border-b border-gray-700 shadow relative z-20">
+    <div class="max-w-7xl px-4 mx-auto h-16 flex items-center justify-between">
+        <ul class="flex items-center h-full space-x-2">
+            <!-- Logo -->
+            <!-- <li aria-label="Home" role="img" class="cursor-pointer">
+                <x-icon name="clock" class="text-indigo-400 w-12"/>
+            </li> -->
+
+            <x-nav-link href="{{ route('home') }}">{{ __('Roster') }}</x-nav-link>
+            <x-nav-link href="{{ route('recipe.index') }}">{{ __('Recipes') }}</x-nav-link>
+        </ul>
+
+        <div class="flex justify-end text-white space-x-4">
+            @auth
+                <a href="{{ route('user.index') }}"><strong>{{ auth()->user()->username }}</strong></a>
+                <x-form method="DELETE" action="{{ route('auth.logout') }}">
+                    <a href="/" onclick="this.closest('form').submit();return false;">{{ __('Logout') }}</a>
+                </x-form>
+            @else
+                <a href="{{ route('auth.login') }}">{{ __('Login') }}</a>
+            @endauth
+        </div>
+    </div>
+</nav>
+<!-- Navigation ends -->

resources/views/recipe/index.blade.php

@@ -0,0 +1,8 @@
+<x-layout name="app">
+
+    <x-slot name="title">{{ __('Recipes') }}</x-slot>
+
+    <div class="p-4">
+        <livewire:recipes />
+    </div>
+</x-layout>

resources/views/recipe/show.blade.php

@@ -0,0 +1,35 @@
+<x-layout name="app">
+
+<x-slot name="title">
+    <div class="flex">
+        <x-profession-icon class="w-8 h-8 mr-4" :name="$recipe->profession->name" />
+        {{ $recipe->profession->name }} - {{ __('Recipe') }}: {{ $recipe->craft->name }}
+    </div>
+</x-slot>
+
+<div class="p-4">
+
+    <div class="mb-4">
+        <x-section-heading>
+            <h2 class="text-3xl">Reagents</h2>
+        </x-section-heading>
+        <ul class="px-4">
+            @foreach($recipe->reagents as $reagent)
+            <li><strong>{{ $reagent->pivot->quantity }}</strong>x {{ $reagent->name }}</li>
+            @endforeach
+        </li>
+    </div>
+
+    <x-section-heading>
+        <h2 class="text-3xl">Crafters</h2>
+    </x-section-heading>
+    <ul class="mx-4 flex flex-wrap gap-4">
+        @foreach($recipe->crafters as $crafter)
+        <li>
+            <x-character-link class="inline-block" :character="$crafter" href="{{ route('character.profession.show', ['character' => $crafter, 'profession' => $recipe->profession ])}}" />
+        </li>
+        @endforeach
+    </ul>
+</div>
+
+</x-layout>

resources/views/user/edit.blade.php

@@ -0,0 +1,33 @@
+<x-layout name="app">
+
+<x-slot name="title">
+    <div class="flex">
+        {{ __('Edit User') }} - {{ $user->username }}
+    </div>
+</x-slot>
+
+<div class="mx-auto max-w-sm p-4">
+
+    <x-form action="{{ route('user.update') }}">
+        <div class="mb-2">
+            <x-form.label for="current_password">{{ __('Current Password') }}</x-form.label>
+            <x-input-password name="current_password" />
+        </div>
+
+        <div class="mb-2">
+            <x-form.label for="password">{{ __('New Password') }}</x-form.label>
+            <x-input-password name="password" />
+        </div>
+
+        <div class="mb-2">
+            <x-form.label for="password_confirmation">{{ __('Confirm Password') }}</x-form.label>
+            <x-input-password name="password_confirmation" />
+        </div>
+
+        <div class="mt-2">
+            <x-button element="input" type="submit" value="Save" />
+        </div>
+    </x-form>
+</div>
+
+</x-layout>

resources/views/user/index.blade.php

@@ -0,0 +1,37 @@
+<x-layout name="app">
+
+<x-slot name="title">
+    <div class="flex">
+        {{ __('User') }} - {{ $user->username }}
+    </div>
+</x-slot>
+
+<x-slot name="page_links">
+    <x-button element="a" class="flex items-center" href="{{ route('user.edit') }}">
+        {{ __('Edit password') }}
+    </x-button>
+</x-slot>
+
+<div class="p-4">
+
+    <x-section-heading>
+        <h2 class="text-3xl">{{ __('Characters') }}</h2>
+        <div>
+            <x-button element="a" class="flex items-center" href="{{ route('character.create') }}">
+                <x-icon name="plus" class="h-6 h-6 mr-1"/> {{ __('Add character') }}
+            </x-button>
+        </div>
+    </x-section-heading>
+
+    @if ($user->characters->count())
+    <div class="grid grid-cols-4 gap-4">
+        @foreach($user->characters as $character)
+        <x-character-card :character="$character" destroy="{{ route('character.destroy', [ 'character' => $character->slug ])}}"/>
+        @endforeach
+    </div>
+    @else
+    <x-empty-result title="No characters">Please add some of yours!</x-empty-result>
+    @endif
+</div>
+
+</x-layout>

resources/views/vendor/livewire/bootstrap.blade.php

@@ -0,0 +1,48 @@
+<div>
+    @if ($paginator->hasPages())
+        <nav>
+            <ul class="pagination">
+                {{-- Previous Page Link --}}
+                @if ($paginator->onFirstPage())
+                    <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                        <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                    </li>
+                @else
+                    <li class="page-item">
+                        <button type="button" dusk="previousPage" class="page-link" wire:click="previousPage" wire:loading.attr="disabled" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</button>
+                    </li>
+                @endif
+
+                {{-- Pagination Elements --}}
+                @foreach ($elements as $element)
+                    {{-- "Three Dots" Separator --}}
+                    @if (is_string($element))
+                        <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                    @endif
+
+                    {{-- Array Of Links --}}
+                    @if (is_array($element))
+                        @foreach ($element as $page => $url)
+                            @if ($page == $paginator->currentPage())
+                                <li class="page-item active" wire:key="paginator-page-{{ $page }}" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                            @else
+                                <li class="page-item" wire:key="paginator-page-{{ $page }}"><button type="button" class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
+                            @endif
+                        @endforeach
+                    @endif
+                @endforeach
+
+                {{-- Next Page Link --}}
+                @if ($paginator->hasMorePages())
+                    <li class="page-item">
+                        <button type="button" dusk="nextPage" class="page-link" wire:click="nextPage" wire:loading.attr="disabled" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</button>
+                    </li>
+                @else
+                    <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                        <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                    </li>
+                @endif
+            </ul>
+        </nav>
+    @endif
+</div>

resources/views/vendor/livewire/simple-bootstrap.blade.php

@@ -0,0 +1,29 @@
+<div>
+    @if ($paginator->hasPages())
+        <nav>
+            <ul class="pagination">
+                {{-- Previous Page Link --}}
+                @if ($paginator->onFirstPage())
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.previous')</span>
+                    </li>
+                @else
+                    <li class="page-item">
+                        <button type="button" class="page-link" wire:click="previousPage" wire:loading.attr="disabled" rel="prev">@lang('pagination.previous')</button>
+                    </li>
+                @endif
+
+                {{-- Next Page Link --}}
+                @if ($paginator->hasMorePages())
+                    <li class="page-item">
+                        <button type="button" class="page-link" wire:click="nextPage" wire:loading.attr="disabled" rel="next">@lang('pagination.next')</button>
+                    </li>
+                @else
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.next')</span>
+                    </li>
+                @endif
+            </ul>
+        </nav>
+    @endif
+</div>

resources/views/vendor/livewire/simple-tailwind.blade.php

@@ -0,0 +1,31 @@
+<div>
+    @if ($paginator->hasPages())
+        <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
+            <span>
+                {{-- Previous Page Link --}}
+                @if ($paginator->onFirstPage())
+                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                        {!! __('pagination.previous') !!}
+                    </span>
+                @else
+                    <button wire:click="previousPage" wire:loading.attr="disabled" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                        {!! __('pagination.previous') !!}
+                    </button>
+                @endif
+            </span>
+
+            <span>
+                {{-- Next Page Link --}}
+                @if ($paginator->hasMorePages())
+                    <button wire:click="nextPage" wire:loading.attr="disabled" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                        {!! __('pagination.next') !!}
+                    </button>
+                @else
+                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                        {!! __('pagination.next') !!}
+                    </span>
+                @endif
+            </span>
+        </nav>
+    @endif
+</div>

resources/views/vendor/livewire/tailwind.blade.php

@@ -0,0 +1,114 @@
+<div>
+    @if ($paginator->hasPages())
+        <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
+            <div class="flex justify-between flex-1 sm:hidden">
+                <span>
+                    @if ($paginator->onFirstPage())
+                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                            {!! __('pagination.previous') !!}
+                        </span>
+                    @else
+                        <button wire:click="previousPage" wire:loading.attr="disabled" dusk="previousPage.before" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                            {!! __('pagination.previous') !!}
+                        </button>
+                    @endif
+                </span>
+
+                <span>
+                    @if ($paginator->hasMorePages())
+                        <button wire:click="nextPage" wire:loading.attr="disabled" dusk="nextPage.before" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                            {!! __('pagination.next') !!}
+                        </button>
+                    @else
+                        <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                            {!! __('pagination.next') !!}
+                        </span>
+                    @endif
+                </span>
+            </div>
+
+            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                <div>
+                    <p class="text-sm text-gray-700 leading-5">
+                        <span>{!! __('Showing') !!}</span>
+                        <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                        <span>{!! __('to') !!}</span>
+                        <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                        <span>{!! __('of') !!}</span>
+                        <span class="font-medium">{{ $paginator->total() }}</span>
+                        <span>{!! __('results') !!}</span>
+                    </p>
+                </div>
+
+                <div>
+                    <span class="relative z-0 inline-flex rounded-md shadow-sm">
+                        <span>
+                            {{-- Previous Page Link --}}
+                            @if ($paginator->onFirstPage())
+                                <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                                    <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </span>
+                                </span>
+                            @else
+                                <button wire:click="previousPage" dusk="previousPage.after" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                    </svg>
+                                </button>
+                            @endif
+                        </span>
+
+                        {{-- Pagination Elements --}}
+                        @foreach ($elements as $element)
+                            {{-- "Three Dots" Separator --}}
+                            @if (is_string($element))
+                                <span aria-disabled="true">
+                                    <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                                </span>
+                            @endif
+
+                            {{-- Array Of Links --}}
+                            @if (is_array($element))
+                                @foreach ($element as $page => $url)
+                                    <span wire:key="paginator-page{{ $page }}">
+                                        @if ($page == $paginator->currentPage())
+                                            <span aria-current="page">
+                                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
+                                            </span>
+                                        @else
+                                            <button wire:click="gotoPage({{ $page }})" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                                {{ $page }}
+                                            </button>
+                                        @endif
+                                    </span>
+                                @endforeach
+                            @endif
+                        @endforeach
+
+                        <span>
+                            {{-- Next Page Link --}}
+                            @if ($paginator->hasMorePages())
+                                <button wire:click="nextPage" dusk="nextPage.after" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                    </svg>
+                                </button>
+                            @else
+                                <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                                    <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                        </svg>
+                                    </span>
+                                </span>
+                            @endif
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </nav>
+    @endif
+</div>