├── src
    ├── stubs
    │   ├── resources
    │   │   ├── alpine
    │   │   │   ├── js
    │   │   │   │   ├── app.js
    │   │   │   │   └── bootstrap.js
    │   │   │   ├── css
    │   │   │   │   └── app.css
    │   │   │   ├── sidebar
    │   │   │   │   ├── layouts
    │   │   │   │   │   ├── auth.blade.php
    │   │   │   │   │   └── app.blade.php
    │   │   │   │   ├── auth
    │   │   │   │   │   ├── login.blade.php
    │   │   │   │   │   └── register.blade.php
    │   │   │   │   ├── includes
    │   │   │   │   │   └── sidebar.blade.php
    │   │   │   │   ├── ui
    │   │   │   │   │   └── index.blade.php
    │   │   │   │   └── home.blade.php
    │   │   │   └── stacked
    │   │   │   │   ├── layouts
    │   │   │   │       ├── auth.blade.php
    │   │   │   │       └── app.blade.php
    │   │   │   │   ├── auth
    │   │   │   │       ├── login.blade.php
    │   │   │   │       └── register.blade.php
    │   │   │   │   ├── includes
    │   │   │   │       └── nav.blade.php
    │   │   │   │   ├── ui
    │   │   │   │       └── index.blade.php
    │   │   │   │   └── home.blade.php
    │   │   └── vue
    │   │   │   ├── js
    │   │   │       ├── bootstrap.js
    │   │   │       ├── components
    │   │   │       │   └── UI
    │   │   │       │   │   ├── BasePanel.vue
    │   │   │       │   │   ├── BaseHeader.vue
    │   │   │       │   │   ├── BaseInput.vue
    │   │   │       │   │   ├── BaseNav.vue
    │   │   │       │   │   └── BaseSidebar.vue
    │   │   │       └── app.js
    │   │   │   ├── css
    │   │   │       └── app.css
    │   │   │   ├── sidebar
    │   │   │       ├── layouts
    │   │   │       │   ├── auth.blade.php
    │   │   │       │   └── app.blade.php
    │   │   │       ├── auth
    │   │   │       │   ├── login.blade.php
    │   │   │       │   └── register.blade.php
    │   │   │       ├── ui
    │   │   │       │   └── index.blade.php
    │   │   │       └── home.blade.php
    │   │   │   └── stacked
    │   │   │       ├── layouts
    │   │   │           ├── auth.blade.php
    │   │   │           └── app.blade.php
    │   │   │       ├── auth
    │   │   │           ├── login.blade.php
    │   │   │           └── register.blade.php
    │   │   │       ├── ui
    │   │   │           └── index.blade.php
    │   │   │       └── home.blade.php
    │   ├── webpack.mix.js
    │   ├── tailwind.config.js
    │   └── controllers
    │   │   └── HomeController.stub
    ├── TailwindCssDashboardPresetServiceProvider.php
    └── Presets
    │   ├── VuePreset.php
    │   └── AlpinePreset.php
├── screenshots
    ├── login.png
    ├── register.png
    ├── preset_sidebar.png
    └── preset_stacked.png
├── .gitignore
├── composer.json
└── README.md


/src/stubs/resources/alpine/js/app.js:
--------------------------------------------------------------------------------
1 | require('./bootstrap');


--------------------------------------------------------------------------------
/screenshots/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Miaababikir/laravel-tailwind-css-dashboard-preset/HEAD/screenshots/login.png


--------------------------------------------------------------------------------
/screenshots/register.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Miaababikir/laravel-tailwind-css-dashboard-preset/HEAD/screenshots/register.png


--------------------------------------------------------------------------------
/screenshots/preset_sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Miaababikir/laravel-tailwind-css-dashboard-preset/HEAD/screenshots/preset_sidebar.png


--------------------------------------------------------------------------------
/screenshots/preset_stacked.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Miaababikir/laravel-tailwind-css-dashboard-preset/HEAD/screenshots/preset_stacked.png


--------------------------------------------------------------------------------
/src/stubs/resources/vue/js/bootstrap.js:
--------------------------------------------------------------------------------
1 | window.axios = require('axios');
2 | 
3 | window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
4 | 
5 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/js/bootstrap.js:
--------------------------------------------------------------------------------
1 | window.axios = require('axios');
2 | 
3 | window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
4 | 
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /node_modules
 2 | /public/hot
 3 | /public/storage
 4 | /storage/*.key
 5 | /vendor
 6 | composer.lock
 7 | .idea
 8 | .env
 9 | .env.backup
10 | .phpunit.result.cache
11 | Homestead.json
12 | Homestead.yaml
13 | npm-debug.log
14 | yarn-error.log
15 | 


--------------------------------------------------------------------------------
/src/stubs/webpack.mix.js:
--------------------------------------------------------------------------------
1 | const mix = require('laravel-mix');
2 | 
3 | mix.js('resources/js/app.js', 'public/js')
4 |     .vue()
5 |     .postCss('resources/css/app.css', 'public/css', [
6 |         require('tailwindcss'),
7 |         require('autoprefixer'),
8 |     ]);
9 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/js/components/UI/BasePanel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="bg-white p-6 rounded shadow">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default {
 9 |         name: "BasePanel"
10 |     }
11 | </script>
12 | 
13 | <style scoped>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/css/app.css:
--------------------------------------------------------------------------------
 1 | /* You can use this font for arabic sites */
 2 | /*@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');*/
 3 | 
 4 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
 5 | 
 6 | @tailwind base;
 7 | 
 8 | @tailwind components;
 9 | 
10 | @tailwind utilities;
11 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/css/app.css:
--------------------------------------------------------------------------------
 1 | /* You can use this font for arabic sites */
 2 | /*@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');*/
 3 | 
 4 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
 5 | 
 6 | @tailwind base;
 7 | 
 8 | @tailwind components;
 9 | 
10 | @tailwind utilities;
11 | 


--------------------------------------------------------------------------------
/src/stubs/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     purge: [],
 3 |     theme: {
 4 |         fontFamily: {
 5 |             'base': 'Inter',
 6 |             // 'base-ar': 'Tajawal' // I love this font for arabic
 7 |         },
 8 |         extend: {},
 9 |     },
10 |     variants: {},
11 |     plugins: [
12 |         require('@tailwindcss/forms')({
13 |             strategy: 'class',
14 |         }),
15 |     ],
16 | };
17 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/js/components/UI/BaseHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <header class="bg-white shadow">
 3 |         <div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8">
 4 |             <h1 class="text-3xl font-bold leading-tight text-gray-900" v-text="title"></h1>
 5 |         </div>
 6 |     </header>
 7 | </template>
 8 | 
 9 | <script>
10 |     export default {
11 |         name: "BaseHeader",
12 |         props: ['title']
13 |     }
14 | </script>
15 | 
16 | <style scoped>
17 | 
18 | </style>
19 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/js/app.js:
--------------------------------------------------------------------------------
 1 | require('./bootstrap');
 2 | 
 3 | import Vue from 'vue';
 4 | 
 5 | Vue.component('base-nav', require('./components/UI/BaseNav').default);
 6 | Vue.component('base-header', require('./components/UI/BaseHeader').default);
 7 | Vue.component('base-panel', require('./components/UI/BasePanel').default);
 8 | Vue.component('base-input', require('./components/UI/BaseInput').default);
 9 | Vue.component('base-sidebar', require('./components/UI/BaseSidebar').default);
10 | 
11 | const app = new Vue({
12 |     el: '#app',
13 | });
14 | 


--------------------------------------------------------------------------------
/src/stubs/controllers/HomeController.stub:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Controllers;
 4 | 
 5 | use Illuminate\Http\Request;
 6 | 
 7 | class HomeController extends Controller
 8 | {
 9 |     /**
10 |      * Create a new controller instance.
11 |      *
12 |      * @return void
13 |      */
14 |     public function __construct()
15 |     {
16 |         $this->middleware('auth');
17 |     }
18 | 
19 |     /**
20 |      * Show the application dashboard.
21 |      *
22 |      * @return \Illuminate\Http\Response
23 |      */
24 |     public function index()
25 |     {
26 |         return view('home');
27 |     }
28 | }


--------------------------------------------------------------------------------
/src/stubs/resources/vue/sidebar/layouts/auth.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 |     <script src="{{ mix('js/app.js') }}" defer></script>
14 | </head>
15 | <body class="bg-gray-200 min-h-screen font-base">
16 | <div id="app">
17 |     @yield('content')
18 | </div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/stacked/layouts/auth.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 |     <script src="{{ mix('js/app.js') }}" defer></script>
14 | </head>
15 | <body class="bg-gray-200 min-h-screen font-base">
16 | <div id="app">
17 |     @yield('content')
18 | </div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/sidebar/layouts/auth.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 |     <script src="{{ mix('js/app.js') }}" defer></script>
14 | </head>
15 | <body class="bg-gray-200 min-h-screen font-base">
16 | <div id="app">
17 |     @yield('content')
18 | </div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/stacked/layouts/auth.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 |     <script src="{{ mix('js/app.js') }}" defer></script>
14 | </head>
15 | <body class="bg-gray-200 min-h-screen font-base">
16 | <div id="app">
17 |     @yield('content')
18 | </div>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "miaababikir/laravel-tailwind-dashboard-preset",
 3 |   "description": "Laravel tailwind css dashboard preset",
 4 |   "keywords": [
 5 |     "laravel",
 6 |     "preset",
 7 |     "tailwindcss"
 8 |   ],
 9 |   "license": "MIT",
10 |   "authors": [
11 |     {
12 |       "name": "Mosab Ibrahim",
13 |       "email": "miaababikir@gmail.com"
14 |     }
15 |   ],
16 |   "require": {
17 |     "laravel/framework": "^7.0|^8.0",
18 |     "laravel/ui": "^2.0|^3.0"
19 |   },
20 |   "autoload": {
21 |     "psr-4": {
22 |       "Miaababikir\\TailwindCssDashboardPreset\\": "src/"
23 |     }
24 |   },
25 |   "extra": {
26 |     "laravel": {
27 |       "providers": [
28 |         "Miaababikir\\TailwindCssDashboardPreset\\TailwindCssDashboardPresetServiceProvider"
29 |       ]
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/js/components/UI/BaseInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <label class="block">
 3 |         <span class="text-gray-700"
 4 |               v-if="label"
 5 |               v-text="label"
 6 |         ></span>
 7 |         <input class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
 8 |                :type="type"
 9 |                :value="value"
10 |                @input="$emit('input', $event.target.value)"
11 |                :placeholder="placeholder"
12 |                :required="required"
13 |         >
14 |     </label>
15 | </template>
16 | 
17 | <script>
18 |     export default {
19 |         name: "BaseInput",
20 |         props: {
21 |             value: null,
22 |             label: String,
23 |             placeholder: String,
24 |             required: String,
25 |             type: {
26 |                 type: String,
27 |                 default: 'text',
28 |             }
29 |         }
30 |     }
31 | </script>
32 | 
33 | <style scoped>
34 | 
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/stacked/layouts/app.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 |     <script src="{{ mix('js/app.js') }}" defer></script>
14 | </head>
15 | <body class="bg-gray-200 min-h-screen font-base">
16 | <div id="app">
17 | 
18 | 
19 |     <base-nav></base-nav>
20 | 
21 |     @yield('header')
22 | 
23 |     <main>
24 |         <div class="container mx-auto py-6 sm:px-6 lg:px-8">
25 |             <!-- Replace with your content -->
26 |             <div class="px-4 py-6 sm:px-0">
27 | 
28 |                 @yield('content')
29 |             </div>
30 |             <!-- /End replace -->
31 |         </div>
32 |     </main>
33 | 
34 | 
35 | </div>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/stacked/layouts/app.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 | 
14 |     <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
15 |     <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
16 | 
17 |     <script src="{{ mix('js/app.js') }}" defer></script>
18 | </head>
19 | <body class="bg-gray-200 min-h-screen font-base">
20 | <div id="app">
21 | 
22 | 
23 |     @include('includes.nav')
24 | 
25 |     @yield('header')
26 | 
27 |     <main>
28 |         <div class="container mx-auto py-6 sm:px-6 lg:px-8">
29 |             <!-- Replace with your content -->
30 |             <div class="px-4 py-6 sm:px-0">
31 | 
32 |                 @yield('content')
33 |             </div>
34 |             <!-- /End replace -->
35 |         </div>
36 |     </main>
37 | 
38 | 
39 | </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/src/TailwindCssDashboardPresetServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Miaababikir\TailwindCssDashboardPreset;
 4 | 
 5 | use Laravel\Ui\UiCommand;
 6 | use Illuminate\Support\ServiceProvider;
 7 | use Miaababikir\TailwindCssDashboardPreset\Presets\AlpinePreset;
 8 | use Miaababikir\TailwindCssDashboardPreset\Presets\VuePreset;
 9 | 
10 | class TailwindCssDashboardPresetServiceProvider extends ServiceProvider
11 | {
12 |     private $layouts = ['stacked', 'sidebar'];
13 | 
14 |     /**
15 |      * Bootstrap services.
16 |      *
17 |      * @return void
18 |      */
19 |     public function boot()
20 |     {
21 |         UiCommand::macro('tailwind-dashboard', function ($command) {
22 |             $options = explode('.', $command->option('option')[0]);
23 | 
24 |             if (in_array($options[1], $this->layouts)) {
25 |                 if ($options[0] == 'vue') {
26 |                     VuePreset::install($options[1]);
27 | 
28 |                     $command->info('Vue Tailwind CSS auth scaffolding installed successfully.');
29 |                 }
30 | 
31 |                 if ($options[0] == 'alpine') {
32 |                     AlpinePreset::install($options[1]);
33 | 
34 |                     $command->info('Alpine Tailwind CSS auth scaffolding installed successfully.');
35 |                 }
36 | 
37 |                 $command->comment('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
38 |             } else {
39 |                 $command->error('Please choose one of the available layouts [stacked, sidebar]');
40 |             }
41 |         });
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # :fire: Laravel tailwind css dashboard preset
 2 | [![Total Downloads](https://poser.pugx.org/miaababikir/laravel-tailwind-dashboard-preset/downloads)](//packagist.org/packages/miaababikir/laravel-tailwind-dashboard-preset) [![Daily Downloads](https://poser.pugx.org/miaababikir/laravel-tailwind-dashboard-preset/d/daily)](//packagist.org/packages/miaababikir/laravel-tailwind-dashboard-preset) [![License](https://poser.pugx.org/miaababikir/laravel-tailwind-dashboard-preset/license)](//packagist.org/packages/miaababikir/laravel-tailwind-dashboard-preset)
 3 | 
 4 | A Laravel dashboard front-end scaffolding preset for [Tailwind CSS](https://tailwindcss.com) - Support RTL out of the box.
 5 | 
 6 | ## Usage
 7 | 
 8 | 1. Fresh install Laravel >= 7.0|8.0 and `cd` to your app.
 9 | 2. Install this preset via `composer require miaababikir/laravel-tailwind-dashboard-preset`. Laravel will automatically discover this package. No need to register the service provider.
10 | 
11 | ### For Vue preset with stacked layout
12 | 
13 | 1. Use `php artisan ui tailwind-dashboard --option=vue.stacked`
14 | 2. `npm install && npm run dev`
15 | 3. `php artisan serve` (or equivalent) to run server and test preset.
16 | 
17 | ### For Vue preset with sidebar layout
18 | 
19 | 1. Use `php artisan ui tailwind-dashboard --option=vue.sidebar`
20 | 2. `npm install && npm run dev`
21 | 3. `php artisan serve` (or equivalent) to run server and test preset.
22 | 
23 | ### For Alpine preset with stacked layout
24 | 
25 | 1. Use `php artisan ui tailwind-dashboard --option=alpine.stacked`
26 | 2. `npm install && npm run dev`
27 | 3. `php artisan serve` (or equivalent) to run server and test preset.
28 | 
29 | ### For Alpine preset with sidebar layout
30 | 
31 | 1. Use `php artisan ui tailwind-dashboard --option=alpine.sidebar`
32 | 2. `npm install && npm run dev`
33 | 3. `php artisan serve` (or equivalent) to run server and test preset.
34 | 
35 | ### Todo
36 | - [ ] Password reset
37 | - [ ] Verify email
38 | - [ ] Welcome
39 | 
40 | ### Screenshots
41 | 
42 | ![Register](/screenshots/register.png)
43 | 
44 | ![Login](/screenshots/login.png)
45 | 
46 | ![Stacked Dashboard](/screenshots/preset_stacked.png)
47 | 
48 | ![Sidebar Dashboard](/screenshots/preset_sidebar.png)
49 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/sidebar/layouts/app.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 |     <script src="{{ mix('js/app.js') }}" defer></script>
14 | </head>
15 | <body class="bg-gray-200 min-h-screen font-base">
16 | <div id="app">
17 | 
18 |     <div class="flex flex-col md:flex-row">
19 | 
20 |         <base-sidebar></base-sidebar>
21 | 
22 |         <div class="w-full md:flex-1">
23 |             <nav class="hidden md:flex justify-between items-center bg-white p-4 shadow-md h-16">
24 |                 <div>
25 |                     <input class="px-4 py-2 bg-gray-200 border border-gray-300 rounded focus:outline-none" type="text"
26 |                            placeholder="Search.."/>
27 |                 </div>
28 |                 <div>
29 |                     <button class="mx-2 text-gray-700 focus:outline-none"
30 |                             onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
31 |                         <svg class="h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
32 |                              viewBox="0 0 24 24" stroke="currentColor">
33 |                             <path
34 |                                 d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
35 |                         </svg>
36 |                     </button>
37 |                 </div>
38 |             </nav>
39 |             <main>
40 |                 <!-- Replace with your content -->
41 |                 <div class="px-8 py-6">
42 |                     @yield('content')
43 |                 </div>
44 |                 <!-- /End replace -->
45 |             </main>
46 |         </div>
47 |         <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
48 |             {{ csrf_field() }}
49 |         </form>
50 |     </div>
51 | 
52 | 
53 | </div>
54 | </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/sidebar/layouts/app.blade.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 |     <!-- CSRF Token -->
 8 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 9 | 
10 |     <title>Laravel</title>
11 | 
12 |     <link rel="stylesheet" href="{{ mix('css/app.css') }}">
13 |     <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
14 |     <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
15 | 
16 |         <script src="{{ mix('js/app.js') }}" defer></script>
17 | </head>
18 | <body class="bg-gray-200 min-h-screen font-base">
19 | <div id="app">
20 | 
21 |     <div class="flex flex-col md:flex-row">
22 | 
23 |         @include('includes.sidebar')
24 | 
25 |         <div class="w-full md:flex-1">
26 |             <nav class="hidden md:flex justify-between items-center bg-white p-4 shadow-md h-16">
27 |                 <div>
28 |                     <input class="px-4 py-2 bg-gray-200 border border-gray-300 rounded focus:outline-none" type="text"
29 |                            placeholder="Search.."/>
30 |                 </div>
31 |                 <div>
32 |                     <button class="mx-2 text-gray-700 focus:outline-none"
33 |                             onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
34 |                         <svg class="h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
35 |                              viewBox="0 0 24 24" stroke="currentColor">
36 |                             <path
37 |                                 d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
38 |                         </svg>
39 |                     </button>
40 |                 </div>
41 |             </nav>
42 |             <main>
43 |                 <!-- Replace with your content -->
44 |                 <div class="px-8 py-6">
45 |                     @yield('content')
46 |                 </div>
47 |                 <!-- /End replace -->
48 |             </main>
49 |         </div>
50 |         <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
51 |             {{ csrf_field() }}
52 |         </form>
53 |     </div>
54 | </div>
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/sidebar/auth/login.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Login or Register</div>
10 |                 <form action="{{ route('login') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="email" name="email" placeholder="Email address"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('email')
16 |                         <p class="text-red-500 text-xs mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="password" name="password" placeholder="Password"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('password')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="flex justify-between items-center mt-6">
31 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
32 |                         <button type="submit"
33 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
34 |                             Login
35 |                         </button>
36 |                     </div>
37 |                 </form>
38 |             </div>
39 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
40 |                 <h1 class="text-gray-600 text-sm">Don't have an account</h1>
41 |                 <a href="/register" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register now</a>
42 |             </div>
43 |         </div>
44 |     </div>
45 | @endsection
46 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/stacked/auth/login.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Login or Register</div>
10 |                 <form action="{{ route('login') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="email" name="email" placeholder="Email address"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('email')
16 |                         <p class="text-red-500 text-xs mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="password" name="password" placeholder="Password"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('password')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="flex justify-between items-center mt-6">
31 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
32 |                         <button type="submit"
33 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
34 |                             Login
35 |                         </button>
36 |                     </div>
37 |                 </form>
38 |             </div>
39 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
40 |                 <h1 class="text-gray-600 text-sm">Don't have an account</h1>
41 |                 <a href="/register" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register now</a>
42 |             </div>
43 |         </div>
44 |     </div>
45 | @endsection
46 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/sidebar/auth/login.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Login or Register</div>
10 |                 <form action="{{ route('login') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="email" name="email" placeholder="Email address"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('email')
16 |                         <p class="text-red-500 text-xs mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="password" name="password" placeholder="Password"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('password')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="flex justify-between items-center mt-6">
31 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
32 |                         <button type="submit"
33 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
34 |                             Login
35 |                         </button>
36 |                     </div>
37 |                 </form>
38 |             </div>
39 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
40 |                 <h1 class="text-gray-600 text-sm">Don't have an account</h1>
41 |                 <a href="/register" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register now</a>
42 |             </div>
43 |         </div>
44 |     </div>
45 | @endsection
46 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/stacked/auth/login.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Login or Register</div>
10 |                 <form action="{{ route('login') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="email" name="email" placeholder="Email address"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('email')
16 |                         <p class="text-red-500 text-xs mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="password" name="password" placeholder="Password"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('password')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="flex justify-between items-center mt-6">
31 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
32 |                         <button type="submit"
33 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
34 |                             Login
35 |                         </button>
36 |                     </div>
37 |                 </form>
38 |             </div>
39 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
40 |                 <h1 class="text-gray-600 text-sm">Don't have an account</h1>
41 |                 <a href="/register" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register now</a>
42 |             </div>
43 |         </div>
44 |     </div>
45 | @endsection
46 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/sidebar/auth/register.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Create new account</div>
10 |                 <form action="{{ route('register') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="text" name="name" placeholder="Full name"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('name')
16 |                         <p class="text-red-500 text-xs italic mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="email" name="email" placeholder="Email address"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('email')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="mt-4 w-full">
31 |                         <input type="password" name="password" placeholder="Password"
32 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
33 |                         @error('password')
34 |                         <p class="text-red-500 text-xs italic mt-4">
35 |                             {{ $message }}
36 |                         </p>
37 |                         @enderror
38 |                     </div>
39 |                     <div class="mt-4 w-full">
40 |                         <input type="password" name="password_confirmation" placeholder="Password confirmation"
41 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
42 |                     </div>
43 |                     <div class="flex justify-between items-center mt-6">
44 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
45 |                         <button type="submit"
46 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
47 |                             Register
48 |                         </button>
49 |                     </div>
50 |                 </form>
51 |             </div>
52 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
53 |                 <h1 class="text-gray-600 text-sm">Already have account?</h1>
54 |                 <a href="/login" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Login</a>
55 |             </div>
56 |         </div>
57 |     </div>
58 | @endsection
59 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/stacked/auth/register.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Create new account</div>
10 |                 <form action="{{ route('register') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="text" name="name" placeholder="Full name"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('name')
16 |                         <p class="text-red-500 text-xs italic mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="email" name="email" placeholder="Email address"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('email')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="mt-4 w-full">
31 |                         <input type="password" name="password" placeholder="Password"
32 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
33 |                         @error('password')
34 |                         <p class="text-red-500 text-xs italic mt-4">
35 |                             {{ $message }}
36 |                         </p>
37 |                         @enderror
38 |                     </div>
39 |                     <div class="mt-4 w-full">
40 |                         <input type="password" name="password_confirmation" placeholder="Password confirmation"
41 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
42 |                     </div>
43 |                     <div class="flex justify-between items-center mt-6">
44 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
45 |                         <button type="submit"
46 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
47 |                             Register
48 |                         </button>
49 |                     </div>
50 |                 </form>
51 |             </div>
52 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
53 |                 <h1 class="text-gray-600 text-sm">Already have account?</h1>
54 |                 <a href="/login" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Login</a>
55 |             </div>
56 |         </div>
57 |     </div>
58 | @endsection
59 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/sidebar/auth/register.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Create new account</div>
10 |                 <form action="{{ route('register') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="text" name="name" placeholder="Full name"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('name')
16 |                         <p class="text-red-500 text-xs italic mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="email" name="email" placeholder="Email address"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('email')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="mt-4 w-full">
31 |                         <input type="password" name="password" placeholder="Password"
32 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
33 |                         @error('password')
34 |                         <p class="text-red-500 text-xs italic mt-4">
35 |                             {{ $message }}
36 |                         </p>
37 |                         @enderror
38 |                     </div>
39 |                     <div class="mt-4 w-full">
40 |                         <input type="password" name="password_confirmation" placeholder="Password confirmation"
41 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
42 |                     </div>
43 |                     <div class="flex justify-between items-center mt-6">
44 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
45 |                         <button type="submit"
46 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
47 |                             Register
48 |                         </button>
49 |                     </div>
50 |                 </form>
51 |             </div>
52 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
53 |                 <h1 class="text-gray-600 text-sm">Already have account?</h1>
54 |                 <a href="/login" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Login</a>
55 |             </div>
56 |         </div>
57 |     </div>
58 | @endsection
59 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/stacked/auth/register.blade.php:
--------------------------------------------------------------------------------
 1 | @extends('layouts.auth')
 2 | 
 3 | @section('content')
 4 |     <div class="min-h-screen flex items-center">
 5 |         <div class="bg-white w-full max-w-lg rounded-lg shadow overflow-hidden mx-auto">
 6 |             <div class="py-4 px-6">
 7 |                 <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
 8 |                 <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome back</div>
 9 |                 <div class="mt-1 text-center text-gray-600">Create new account</div>
10 |                 <form action="{{ route('register') }}" method="POST">
11 |                     @csrf
12 |                     <div class="mt-4 w-full">
13 |                         <input type="text" name="name" placeholder="Full name"
14 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
15 |                         @error('name')
16 |                         <p class="text-red-500 text-xs italic mt-4">
17 |                             {{ $message }}
18 |                         </p>
19 |                         @enderror
20 |                     </div>
21 |                     <div class="mt-4 w-full">
22 |                         <input type="email" name="email" placeholder="Email address"
23 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
24 |                         @error('email')
25 |                         <p class="text-red-500 text-xs italic mt-4">
26 |                             {{ $message }}
27 |                         </p>
28 |                         @enderror
29 |                     </div>
30 |                     <div class="mt-4 w-full">
31 |                         <input type="password" name="password" placeholder="Password"
32 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
33 |                         @error('password')
34 |                         <p class="text-red-500 text-xs italic mt-4">
35 |                             {{ $message }}
36 |                         </p>
37 |                         @enderror
38 |                     </div>
39 |                     <div class="mt-4 w-full">
40 |                         <input type="password" name="password_confirmation" placeholder="Password confirmation"
41 |                                class="w-full mt-2 py-3 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"/>
42 |                     </div>
43 |                     <div class="flex justify-between items-center mt-6">
44 |                         <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget password?</a>
45 |                         <button type="submit"
46 |                                 class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none">
47 |                             Register
48 |                         </button>
49 |                     </div>
50 |                 </form>
51 |             </div>
52 |             <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
53 |                 <h1 class="text-gray-600 text-sm">Already have account?</h1>
54 |                 <a href="/login" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Login</a>
55 |             </div>
56 |         </div>
57 |     </div>
58 | @endsection
59 | 


--------------------------------------------------------------------------------
/src/Presets/VuePreset.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Miaababikir\TailwindCssDashboardPreset\Presets;
  4 | 
  5 | use Illuminate\Support\Arr;
  6 | use Illuminate\Support\Str;
  7 | use Illuminate\Filesystem\Filesystem;
  8 | use Symfony\Component\Finder\SplFileInfo;
  9 | use \Laravel\Ui\Presets\Preset as LaravelPreset;
 10 | 
 11 | class VuePreset extends LaravelPreset
 12 | {
 13 |     public static $type;
 14 | 
 15 |     public static function install($type)
 16 |     {
 17 |         static::$type = $type;
 18 |         static::updatePackages();
 19 |         static::updateStyles();
 20 |         static::updateJavascript();
 21 |         static::updateBootstrapping();
 22 |         static::removeNodeModules();
 23 |         static::installAuth();
 24 |     }
 25 | 
 26 |     public static function installAuth()
 27 |     {
 28 |         static::scaffoldController();
 29 |         static::scaffoldAuth();
 30 |         static::scaffoldViews();
 31 |     }
 32 | 
 33 |     protected static function updatePackageArray(array $packages)
 34 |     {
 35 |         return array_merge([
 36 |             "axios" => "^0.21",
 37 |             'resolve-url-loader' => '^2.3.1',
 38 |             'vue' => '^2.6.12',
 39 |             "laravel-mix" =>"^6.0.6",
 40 |             'vue-template-compiler' => '^2.6.12',
 41 |             "@tailwindcss/forms"=> "^0.4.0",
 42 |             "tailwindcss" => "^2.2.19"
 43 | 
 44 |         ], Arr::except($packages, [
 45 |             'bootstrap',
 46 |             'bootstrap-sass',
 47 |             'popper.js',
 48 |             'jquery',
 49 |         ]));
 50 |     }
 51 | 
 52 |     protected static function scaffoldController()
 53 |     {
 54 |         if (!is_dir($directory = app_path('Http/Controllers/Auth'))) {
 55 |             mkdir($directory, 0755, true);
 56 |         }
 57 | 
 58 |         $filesystem = new Filesystem;
 59 | 
 60 |         collect($filesystem->allFiles(base_path('vendor/laravel/ui/stubs/Auth')))
 61 |             ->each(function (SplFileInfo $file) use ($filesystem) {
 62 |                 $filesystem->copy(
 63 |                     $file->getPathname(),
 64 |                     app_path('Http/Controllers/Auth/' . Str::replaceLast('.stub', '.php', $file->getFilename()))
 65 |                 );
 66 |             });
 67 |     }
 68 | 
 69 |     protected static function scaffoldAuth()
 70 |     {
 71 |         file_put_contents(app_path('Http/Controllers/HomeController.php'), static::compileControllerStub());
 72 | 
 73 |         file_put_contents(
 74 |             base_path('routes/web.php'),
 75 |             "Auth::routes();\n\nRoute::get('/home', [\App\Http\Controllers\HomeController::class, 'index'])->name('home');\n\nRoute::view('/ui', 'ui.index');\n\n",
 76 |             FILE_APPEND
 77 |         );
 78 |     }
 79 | 
 80 |     protected static function scaffoldViews()
 81 |     {
 82 |         tap(new Filesystem, function ($filesystem) {
 83 |             $filesystem->copyDirectory(__DIR__ . '/../stubs/resources/vue/' . static::$type, resource_path('views'));
 84 | 
 85 |             collect($filesystem->allFiles(base_path('vendor/laravel/ui/stubs/migrations')))
 86 |                 ->each(function (SplFileInfo $file) use ($filesystem) {
 87 |                     $filesystem->copy(
 88 |                         $file->getPathname(),
 89 |                         database_path('migrations/' . $file->getFilename())
 90 |                     );
 91 |                 });
 92 |         });
 93 |     }
 94 | 
 95 |     protected static function updateStyles()
 96 |     {
 97 |         tap(new Filesystem, function ($filesystem) {
 98 |             $filesystem->deleteDirectory(resource_path('sass'));
 99 |             $filesystem->delete(public_path('css/app.css'));
100 | 
101 |             if (!$filesystem->isDirectory($directory = resource_path('css'))) {
102 |                 $filesystem->makeDirectory($directory, 0755, true);
103 |             }
104 |         });
105 | 
106 |         copy(__DIR__ . '/../stubs/resources/vue/css/app.css', resource_path('css/app.css'));
107 |     }
108 | 
109 |     protected static function updateJavascript()
110 |     {
111 |         tap(new Filesystem, function ($filesystem) {
112 |             $filesystem->deleteDirectory(resource_path('js'));
113 |             $filesystem->delete(public_path('js/app.js'));
114 | 
115 |             if (!$filesystem->isDirectory($directory = resource_path('js'))) {
116 |                 $filesystem->copyDirectory(__DIR__ . '/../stubs/resources/vue/js', resource_path('js'));
117 |             }
118 |         });
119 |     }
120 | 
121 |     protected static function updateBootstrapping()
122 |     {
123 |         copy(__DIR__ . '/../stubs/tailwind.config.js', base_path('tailwind.config.js'));
124 | 
125 |         copy(__DIR__ . '/../stubs/webpack.mix.js', base_path('webpack.mix.js'));
126 |     }
127 | 
128 |     protected static function compileControllerStub()
129 |     {
130 |         return file_get_contents(__DIR__.'/../stubs/controllers/HomeController.stub');
131 |     }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/Presets/AlpinePreset.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Miaababikir\TailwindCssDashboardPreset\Presets;
  4 | 
  5 | use Illuminate\Support\Arr;
  6 | use Illuminate\Support\Str;
  7 | use Illuminate\Filesystem\Filesystem;
  8 | use Symfony\Component\Finder\SplFileInfo;
  9 | use \Laravel\Ui\Presets\Preset as LaravelPreset;
 10 | 
 11 | class AlpinePreset extends LaravelPreset
 12 | {
 13 |     public static $type;
 14 |     
 15 |     public static function install($type)
 16 |     {
 17 |         static::$type = $type;
 18 |         static::updatePackages();
 19 |         static::updateStyles();
 20 |         static::updateJavascript();
 21 |         static::updateBootstrapping();
 22 |         static::removeNodeModules();
 23 |         static::installAuth();
 24 |     }
 25 | 
 26 |     public static function installAuth()
 27 |     {
 28 |         static::scaffoldController();
 29 |         static::scaffoldAuth();
 30 |         static::scaffoldViews();
 31 |     }
 32 | 
 33 |     protected static function updatePackageArray(array $packages)
 34 |     {
 35 |         return array_merge([
 36 |             "axios" => "^0.19",
 37 |             "cross-env" => "^7.0",
 38 |             "laravel-mix" =>"^6.0.6",
 39 |             "resolve-url-loader" => "^2.3.1",
 40 |             "@tailwindcss/forms"=> "^0.4.0",
 41 |             "tailwindcss" => "^2.2.19"
 42 | 
 43 |         ], Arr::except($packages, [
 44 |             'bootstrap',
 45 |             'bootstrap-sass',
 46 |             'popper.js',
 47 |             'laravel-mix',
 48 |             'jquery',
 49 |             'sass',
 50 |             'sass-loader'
 51 |         ]));
 52 |     }
 53 | 
 54 |     protected static function scaffoldController()
 55 |     {
 56 |         if (!is_dir($directory = app_path('Http/Controllers/Auth'))) {
 57 |             mkdir($directory, 0755, true);
 58 |         }
 59 | 
 60 |         $filesystem = new Filesystem;
 61 | 
 62 |         collect($filesystem->allFiles(base_path('vendor/laravel/ui/stubs/Auth')))
 63 |             ->each(function (SplFileInfo $file) use ($filesystem) {
 64 |                 $filesystem->copy(
 65 |                     $file->getPathname(),
 66 |                     app_path('Http/Controllers/Auth/' . Str::replaceLast('.stub', '.php', $file->getFilename()))
 67 |                 );
 68 |             });
 69 |     }
 70 | 
 71 |     protected static function scaffoldAuth()
 72 |     {
 73 |         file_put_contents(app_path('Http/Controllers/HomeController.php'), static::compileControllerStub());
 74 |         
 75 |         file_put_contents(
 76 |             base_path('routes/web.php'),
 77 |             "Auth::routes();\n\nRoute::get('/home', [\App\Http\Controllers\HomeController::class, 'index'])->name('home');\n\nRoute::view('/ui', 'ui.index');\n\n",
 78 |             FILE_APPEND
 79 |         );
 80 |     }
 81 | 
 82 |     protected static function scaffoldViews()
 83 |     {
 84 |         tap(new Filesystem, function ($filesystem) {
 85 |             $filesystem->copyDirectory(__DIR__ . '/../stubs/resources/alpine/' . static::$type, resource_path('views'));
 86 | 
 87 |             collect($filesystem->allFiles(base_path('vendor/laravel/ui/stubs/migrations')))
 88 |                 ->each(function (SplFileInfo $file) use ($filesystem) {
 89 |                     $filesystem->copy(
 90 |                         $file->getPathname(),
 91 |                         database_path('migrations/' . $file->getFilename())
 92 |                     );
 93 |                 });
 94 |         });
 95 |     }
 96 | 
 97 |     protected static function updateStyles()
 98 |     {
 99 |         tap(new Filesystem, function ($filesystem) {
100 |             $filesystem->deleteDirectory(resource_path('sass'));
101 |             $filesystem->delete(public_path('css/app.css'));
102 | 
103 |             if (!$filesystem->isDirectory($directory = resource_path('css'))) {
104 |                 $filesystem->makeDirectory($directory, 0755, true);
105 |             }
106 |         });
107 | 
108 |         copy(__DIR__ . '/../stubs/resources/alpine/css/app.css', resource_path('css/app.css'));
109 |     }
110 | 
111 |     protected static function updateJavascript()
112 |     {
113 |         tap(new Filesystem, function ($filesystem) {
114 |             $filesystem->deleteDirectory(resource_path('js'));
115 |             $filesystem->delete(public_path('js/app.js'));
116 | 
117 |             if (!$filesystem->isDirectory($directory = resource_path('js'))) {
118 |                 $filesystem->copyDirectory(__DIR__ . '/../stubs/resources/alpine/js', resource_path('js'));
119 |             }
120 |         });
121 |     }
122 | 
123 |     protected static function updateBootstrapping()
124 |     {
125 |         copy(__DIR__ . '/../stubs/tailwind.config.js', base_path('tailwind.config.js'));
126 | 
127 |         copy(__DIR__ . '/../stubs/webpack.mix.js', base_path('webpack.mix.js'));
128 |     }
129 | 
130 |     protected static function compileControllerStub()
131 |     {
132 |         return file_get_contents(__DIR__.'/../stubs/controllers/HomeController.stub');
133 |     }
134 | }
135 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/stacked/includes/nav.blade.php:
--------------------------------------------------------------------------------
 1 | <nav class="bg-gray-800" x-data="{ isOpen: false }">
 2 |     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
 3 |         <div class="flex items-center justify-between h-16">
 4 |             <div class="flex items-center">
 5 |                 <div class="flex-shrink-0">
 6 |                     <a href="#" class="flex items-center">
 7 |                         <svg class="w-6" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
 8 |                             <path d="M32.6883 0.335913C32.3407 -0.0248702 31.7929 -0.104067 31.3596 0.142322L19.2249 6.96861L20.3117 1.53926C20.4063 1.06188 20.1797 0.582302 19.7529 0.353512C19.3261 0.126923 18.7981 0.199519 18.455 0.544904L2.96986 16.03C2.94127 16.052 2.91487 16.0762 2.89067 16.1026C1.02735 17.9945 0 20.4804 0 23.1005C0 28.5584 4.4416 33 9.89955 33C12.5218 33 15.0077 31.9727 16.8974 30.1115C16.926 30.0829 16.9502 30.0543 16.9766 30.0235L30.1232 16.8792C30.4532 16.5492 30.539 16.0454 30.3366 15.6252C30.1364 15.205 29.6876 14.9674 29.2235 15.0092L24.4409 15.5394L32.8379 1.67125C33.0975 1.24227 33.0381 0.694497 32.6883 0.335913ZM9.89955 29.7002C6.25431 29.7002 3.29985 26.7457 3.29985 23.1005C3.29985 19.4552 6.25431 16.5008 9.89955 16.5008C13.5448 16.5008 16.4992 19.4552 16.4992 23.1005C16.4992 26.7457 13.5448 29.7002 9.89955 29.7002Z" fill="#667EEA"/>
 9 |                         </svg>
10 | 
11 |                         <span class="text-gray-300 text-xl font-semibold mx-2">Dashboard</span>
12 |                     </a>
13 |                 </div>
14 |                 <div class="hidden md:block">
15 |                     <div class="mx-10 flex items-baseline">
16 |                         <a href="#"
17 |                            class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
18 |                         <a href="#"
19 |                            class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Link</a>
20 |                         <a href="#"
21 |                            class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another
22 |                             Link</a>
23 |                         <a href="#"
24 |                            class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another
25 |                             one</a>
26 |                         <a href="#"
27 |                            class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Reports</a>
28 |                     </div>
29 |                 </div>
30 |             </div>
31 |             <div class="hidden md:block">
32 |                 <div class="flex">
33 |                     <button
34 |                         class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
35 |                         onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
36 |                         Logout
37 |                     </button>
38 |                 </div>
39 |             </div>
40 |             <div class="-ml-2 flex md:hidden">
41 |                 <!-- Mobile menu button -->
42 |                 <button @click="isOpen = !isOpen"
43 |                         class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
44 |                     <!-- Menu open: "hidden", Menu closed: "block" -->
45 |                     <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
46 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
47 |                               d="M4 6h16M4 12h16M4 18h16"/>
48 |                     </svg>
49 |                     <!-- Menu open: "block", Menu closed: "hidden" -->
50 |                     <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
51 |                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
52 |                               d="M6 18L18 6M6 6l12 12"/>
53 |                     </svg>
54 |                 </button>
55 |             </div>
56 |         </div>
57 |     </div>
58 | 
59 |     <!--
60 |       Mobile menu, toggle classes based on menu state.
61 | 
62 |       Open: "block", closed: "hidden"
63 |     -->
64 |     <div class="block md:hidden" x-show="isOpen">
65 |         <div class="px-2 pt-2 pb-3 sm:px-3">
66 |             <a href="#"
67 |                class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
68 |             <a href="#"
69 |                class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Link</a>
70 |             <a href="#"
71 |                class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another
72 |                 Link</a>
73 |             <a href="#"
74 |                class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another
75 |                 one</a>
76 |             <a href="#"
77 |                class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Reports</a>
78 |             <button
79 |                 class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
80 |                 onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout
81 |             </button>
82 | 
83 |         </div>
84 |     </div>
85 |     <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
86 |         {{ csrf_field() }}
87 |     </form>
88 | </nav>
89 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/js/components/UI/BaseNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav class="bg-gray-800">
 3 |         <div class="container mx-auto px-4 sm:px-6 lg:px-8">
 4 |             <div class="flex items-center justify-between h-16">
 5 |                 <div class="flex items-center">
 6 |                     <div class="flex-shrink-0">
 7 |                         <a href="#" class="flex items-center">
 8 |                             <svg class="w-6" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
 9 |                                 <path d="M32.6883 0.335913C32.3407 -0.0248702 31.7929 -0.104067 31.3596 0.142322L19.2249 6.96861L20.3117 1.53926C20.4063 1.06188 20.1797 0.582302 19.7529 0.353512C19.3261 0.126923 18.7981 0.199519 18.455 0.544904L2.96986 16.03C2.94127 16.052 2.91487 16.0762 2.89067 16.1026C1.02735 17.9945 0 20.4804 0 23.1005C0 28.5584 4.4416 33 9.89955 33C12.5218 33 15.0077 31.9727 16.8974 30.1115C16.926 30.0829 16.9502 30.0543 16.9766 30.0235L30.1232 16.8792C30.4532 16.5492 30.539 16.0454 30.3366 15.6252C30.1364 15.205 29.6876 14.9674 29.2235 15.0092L24.4409 15.5394L32.8379 1.67125C33.0975 1.24227 33.0381 0.694497 32.6883 0.335913ZM9.89955 29.7002C6.25431 29.7002 3.29985 26.7457 3.29985 23.1005C3.29985 19.4552 6.25431 16.5008 9.89955 16.5008C13.5448 16.5008 16.4992 19.4552 16.4992 23.1005C16.4992 26.7457 13.5448 29.7002 9.89955 29.7002Z" fill="#667EEA"/>
10 |                             </svg>
11 | 
12 |                             <span class="text-gray-300 text-xl font-semibold mx-2">Dashboard</span>
13 |                         </a>
14 |                     </div>
15 |                     <div class="hidden md:block">
16 |                         <div class="mx-10 flex items-baseline">
17 |                             <a href="#"
18 |                                class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
19 |                             <a href="#"
20 |                                class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Link</a>
21 |                             <a href="#"
22 |                                class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another Link</a>
23 |                             <a href="#"
24 |                                class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another one</a>
25 |                             <a href="#"
26 |                                class="mx-1 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Reports</a>
27 |                         </div>
28 |                     </div>
29 |                 </div>
30 |                 <div class="hidden md:block">
31 |                     <div class="flex">
32 |                         <button class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" @click="logout">Logout</button>
33 |                     </div>
34 |                 </div>
35 |                 <div class="-ml-2 flex md:hidden">
36 |                     <!-- Mobile menu button -->
37 |                     <button @click="isOpen = !isOpen"
38 |                             class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
39 |                         <!-- Menu open: "hidden", Menu closed: "block" -->
40 |                         <svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
41 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
42 |                                   d="M4 6h16M4 12h16M4 18h16"/>
43 |                         </svg>
44 |                         <!-- Menu open: "block", Menu closed: "hidden" -->
45 |                         <svg class="hidden h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
46 |                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
47 |                                   d="M6 18L18 6M6 6l12 12"/>
48 |                         </svg>
49 |                     </button>
50 |                 </div>
51 |             </div>
52 |         </div>
53 | 
54 |         <!--
55 |           Mobile menu, toggle classes based on menu state.
56 | 
57 |           Open: "block", closed: "hidden"
58 |         -->
59 |         <div class="block md:hidden" v-show="isOpen">
60 |             <div class="px-2 pt-2 pb-3 sm:px-3">
61 |                 <a href="#"
62 |                    class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
63 |                 <a href="#"
64 |                    class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Link</a>
65 |                 <a href="#"
66 |                    class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another Link</a>
67 |                 <a href="#"
68 |                    class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Another one</a>
69 |                 <a href="#"
70 |                    class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Reports</a>
71 |                 <button class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
72 |                    @click="logout">Logout</button>
73 | 
74 |             </div>
75 |         </div>
76 |     </nav>
77 | </template>
78 | 
79 | <script>
80 |     export default {
81 |         name: "BaseNav",
82 |         data() {
83 |             return {
84 |                 isOpen: false
85 |             }
86 |         },
87 |         methods: {
88 |             logout() {
89 |                 axios.post('logout')
90 |                     .then(() => location.reload());
91 |             }
92 |         }
93 |     }
94 | </script>
95 | 
96 | <style scoped>
97 | 
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/sidebar/includes/sidebar.blade.php:
--------------------------------------------------------------------------------
  1 | <aside class="w-full md:w-64 bg-gray-800 md:min-h-screen" x-data="{ isOpen: false }">
  2 |     <div class="flex items-center justify-between bg-gray-900 p-4 h-16">
  3 |         <a href="#" class="flex items-center">
  4 |             <svg class="w-6" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  5 |                 <path d="M32.6883 0.335913C32.3407 -0.0248702 31.7929 -0.104067 31.3596 0.142322L19.2249 6.96861L20.3117 1.53926C20.4063 1.06188 20.1797 0.582302 19.7529 0.353512C19.3261 0.126923 18.7981 0.199519 18.455 0.544904L2.96986 16.03C2.94127 16.052 2.91487 16.0762 2.89067 16.1026C1.02735 17.9945 0 20.4804 0 23.1005C0 28.5584 4.4416 33 9.89955 33C12.5218 33 15.0077 31.9727 16.8974 30.1115C16.926 30.0829 16.9502 30.0543 16.9766 30.0235L30.1232 16.8792C30.4532 16.5492 30.539 16.0454 30.3366 15.6252C30.1364 15.205 29.6876 14.9674 29.2235 15.0092L24.4409 15.5394L32.8379 1.67125C33.0975 1.24227 33.0381 0.694497 32.6883 0.335913ZM9.89955 29.7002C6.25431 29.7002 3.29985 26.7457 3.29985 23.1005C3.29985 19.4552 6.25431 16.5008 9.89955 16.5008C13.5448 16.5008 16.4992 19.4552 16.4992 23.1005C16.4992 26.7457 13.5448 29.7002 9.89955 29.7002Z" fill="#667EEA"/>
  6 |             </svg>
  7 | 
  8 |             <span class="text-gray-300 text-xl font-semibold mx-2">Dashboard</span>
  9 |         </a>
 10 |         <div class="flex md:hidden">
 11 |             <button type="button" @click="isOpen = !isOpen"
 12 |                     class="text-gray-300 hover:text-gray-500 focus:outline-none focus:text-gray-500">
 13 |                 <svg class="fill-current w-8" fill="none" stroke-linecap="round" stroke-linejoin="round"
 14 |                      stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 15 |                     <path d="M4 6h16M4 12h16M4 18h16"></path>
 16 |                 </svg>
 17 |             </button>
 18 |         </div>
 19 |     </div>
 20 |     <div class="px-2 py-6 md:block" :class="isOpen? 'block': 'hidden'" >
 21 |         <ul>
 22 |             <li class="px-2 py-3 bg-gray-900 rounded">
 23 |                 <a href="#" class="flex items-center">
 24 |                     <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 25 |                          stroke-linejoin="round"
 26 |                          stroke-width="2"
 27 |                          viewBox="0 0 24 24" stroke="currentColor">
 28 |                         <path
 29 |                             d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
 30 |                     </svg>
 31 |                     <span class="mx-2 text-gray-300">Dashboard</span>
 32 |                 </a>
 33 |             </li>
 34 |             <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 35 |                 <a href="#" class="flex items-center">
 36 |                     <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 37 |                          stroke-linejoin="round"
 38 |                          stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 39 |                         <path
 40 |                             d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
 41 |                     </svg>
 42 |                     <span class="mx-2 text-gray-300">Team</span>
 43 |                 </a>
 44 |             </li>
 45 |             <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 46 |                 <a href="#" class="flex items-center">
 47 |                     <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 48 |                          stroke-linejoin="round"
 49 |                          stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 50 |                         <path
 51 |                             d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
 52 |                     </svg>
 53 |                     <span class="mx-2 text-gray-300">Projects</span>
 54 |                 </a>
 55 |             </li>
 56 |             <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 57 |                 <a href="#" class="flex items-center">
 58 |                     <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 59 |                          stroke-linejoin="round"
 60 |                          stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 61 |                         <path
 62 |                             d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
 63 |                     </svg>
 64 |                     <span class="mx-2 text-gray-300">Calendar</span>
 65 |                 </a>
 66 |             </li>
 67 |             <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 68 |                 <a href="#" class="flex items-center">
 69 |                     <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 70 |                          stroke-linejoin="round"
 71 |                          stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 72 |                         <path
 73 |                             d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
 74 |                     </svg>
 75 |                     <span class="mx-2 text-gray-300">Documents</span>
 76 |                 </a>
 77 |             </li>
 78 |             <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 79 |                 <a href="#" class="flex items-center">
 80 |                     <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 81 |                          stroke-linejoin="round"
 82 |                          stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 83 |                         <path
 84 |                             d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
 85 |                     </svg>
 86 |                     <span class="mx-2 text-gray-300">Reports</span>
 87 |                 </a>
 88 |             </li>
 89 |         </ul>
 90 |         <div class="border-t border-gray-700 -mx-2 mt-2 md:hidden"></div>
 91 |         <ul class="mt-6 md:hidden">
 92 |             <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 93 |                 <a href="#" class="mx-2 text-gray-300">Account Settings</a>
 94 |             </li>
 95 |             <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 96 |                 <button class="mx-2 text-gray-300" @click="logout">Logout</button>
 97 |             </li>
 98 |         </ul>
 99 |     </div>
100 | </aside>
101 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/js/components/UI/BaseSidebar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <aside class="w-full md:w-64 bg-gray-800 md:min-h-screen">
  3 |         <div class="flex items-center justify-between bg-gray-900 p-4 h-16">
  4 |             <a href="#" class="flex items-center">
  5 |                 <svg class="w-6" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  6 |                     <path d="M32.6883 0.335913C32.3407 -0.0248702 31.7929 -0.104067 31.3596 0.142322L19.2249 6.96861L20.3117 1.53926C20.4063 1.06188 20.1797 0.582302 19.7529 0.353512C19.3261 0.126923 18.7981 0.199519 18.455 0.544904L2.96986 16.03C2.94127 16.052 2.91487 16.0762 2.89067 16.1026C1.02735 17.9945 0 20.4804 0 23.1005C0 28.5584 4.4416 33 9.89955 33C12.5218 33 15.0077 31.9727 16.8974 30.1115C16.926 30.0829 16.9502 30.0543 16.9766 30.0235L30.1232 16.8792C30.4532 16.5492 30.539 16.0454 30.3366 15.6252C30.1364 15.205 29.6876 14.9674 29.2235 15.0092L24.4409 15.5394L32.8379 1.67125C33.0975 1.24227 33.0381 0.694497 32.6883 0.335913ZM9.89955 29.7002C6.25431 29.7002 3.29985 26.7457 3.29985 23.1005C3.29985 19.4552 6.25431 16.5008 9.89955 16.5008C13.5448 16.5008 16.4992 19.4552 16.4992 23.1005C16.4992 26.7457 13.5448 29.7002 9.89955 29.7002Z" fill="#667EEA"/>
  7 |                 </svg>
  8 | 
  9 |                 <span class="text-gray-300 text-xl font-semibold mx-2">Dashboard</span>
 10 |             </a>
 11 |             <div class="flex md:hidden">
 12 |                 <button type="button" @click="isOpen = !isOpen"
 13 |                         class="text-gray-300 hover:text-gray-500 focus:outline-none focus:text-gray-500">
 14 |                     <svg class="fill-current w-8" fill="none" stroke-linecap="round" stroke-linejoin="round"
 15 |                          stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 16 |                         <path d="M4 6h16M4 12h16M4 18h16"></path>
 17 |                     </svg>
 18 |                 </button>
 19 |             </div>
 20 |         </div>
 21 |         <div class="px-2 py-6 md:block" :class="isOpen? 'block': 'hidden'">
 22 |             <ul>
 23 |                 <li class="px-2 py-3 bg-gray-900 rounded">
 24 |                     <a href="#" class="flex items-center">
 25 |                         <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 26 |                              stroke-linejoin="round"
 27 |                              stroke-width="2"
 28 |                              viewBox="0 0 24 24" stroke="currentColor">
 29 |                             <path
 30 |                                 d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
 31 |                         </svg>
 32 |                         <span class="mx-2 text-gray-300">Dashboard</span>
 33 |                     </a>
 34 |                 </li>
 35 |                 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 36 |                     <a href="#" class="flex items-center">
 37 |                         <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 38 |                              stroke-linejoin="round"
 39 |                              stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 40 |                             <path
 41 |                                 d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
 42 |                         </svg>
 43 |                         <span class="mx-2 text-gray-300">Team</span>
 44 |                     </a>
 45 |                 </li>
 46 |                 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 47 |                     <a href="#" class="flex items-center">
 48 |                         <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 49 |                              stroke-linejoin="round"
 50 |                              stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 51 |                             <path
 52 |                                 d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
 53 |                         </svg>
 54 |                         <span class="mx-2 text-gray-300">Projects</span>
 55 |                     </a>
 56 |                 </li>
 57 |                 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 58 |                     <a href="#" class="flex items-center">
 59 |                         <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 60 |                              stroke-linejoin="round"
 61 |                              stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 62 |                             <path
 63 |                                 d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
 64 |                         </svg>
 65 |                         <span class="mx-2 text-gray-300">Calendar</span>
 66 |                     </a>
 67 |                 </li>
 68 |                 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 69 |                     <a href="#" class="flex items-center">
 70 |                         <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 71 |                              stroke-linejoin="round"
 72 |                              stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 73 |                             <path
 74 |                                 d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
 75 |                         </svg>
 76 |                         <span class="mx-2 text-gray-300">Documents</span>
 77 |                     </a>
 78 |                 </li>
 79 |                 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 80 |                     <a href="#" class="flex items-center">
 81 |                         <svg class="w-6 text-gray-500" fill="none" stroke-linecap="round"
 82 |                              stroke-linejoin="round"
 83 |                              stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
 84 |                             <path
 85 |                                 d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
 86 |                         </svg>
 87 |                         <span class="mx-2 text-gray-300">Reports</span>
 88 |                     </a>
 89 |                 </li>
 90 |             </ul>
 91 |             <div class="border-t border-gray-700 -mx-2 mt-2 md:hidden"></div>
 92 |             <ul class="mt-6 md:hidden">
 93 |                 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 94 |                     <a href="#" class="mx-2 text-gray-300">Account Settings</a>
 95 |                 </li>
 96 |                 <li class="px-2 py-3 hover:bg-gray-900 rounded mt-2">
 97 |                     <button class="mx-2 text-gray-300" @click="logout">Logout</button>
 98 |                 </li>
 99 |             </ul>
100 |         </div>
101 |     </aside>
102 | </template>
103 | 
104 | <script>
105 |     export default {
106 |         name: "BaseSidebar",
107 |         data() {
108 |             return {
109 |                 isOpen: false
110 |             }
111 |         },
112 |         methods: {
113 |             logout() {
114 |                 axios.post('logout')
115 |                     .then(() => location.reload());
116 |             }
117 |         }
118 |     }
119 | </script>
120 | 
121 | <style scoped>
122 | 
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/sidebar/ui/index.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('content')
  4 | 
  5 |     <base-panel class="mt-4">
  6 |         <h2 class="text-2xl font-medium">Tables</h2>
  7 |         <div class="mt-4">
  8 |             <div class="flex flex-col">
  9 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
 10 |                     <div
 11 |                         class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
 12 |                         <table class="min-w-full">
 13 |                             <thead class="bg-gray-100">
 14 |                             <tr>
 15 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 16 |                                     Name
 17 |                                 </th>
 18 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 19 |                                     Title
 20 |                                 </th>
 21 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 22 |                                     Status
 23 |                                 </th>
 24 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 25 |                                     Role
 26 |                                 </th>
 27 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
 28 |                             </tr>
 29 |                             </thead>
 30 |                             <tbody class="bg-white">
 31 |                             <tr>
 32 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 33 |                                     <div class="flex items-center">
 34 |                                         <div class="flex-shrink-0 h-10 w-10">
 35 |                                             <img class="h-10 w-10 rounded-full"
 36 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 37 |                                                  alt=""/>
 38 |                                         </div>
 39 |                                         <div class="mx-2">
 40 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 41 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 42 |                                         </div>
 43 |                                     </div>
 44 |                                 </td>
 45 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 46 |                                     Software Engineer
 47 |                                 </td>
 48 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 49 |                                   <span
 50 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 51 |                                     Active
 52 |                                   </span>
 53 |                                 </td>
 54 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 55 |                                     Owner
 56 |                                 </td>
 57 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
 58 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
 59 |                                 </td>
 60 |                             </tr>
 61 |                             <tr>
 62 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 63 |                                     <div class="flex items-center">
 64 |                                         <div class="flex-shrink-0 h-10 w-10">
 65 |                                             <img class="h-10 w-10 rounded-full"
 66 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 67 |                                                  alt=""/>
 68 |                                         </div>
 69 |                                         <div class="mx-2">
 70 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 71 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 72 |                                         </div>
 73 |                                     </div>
 74 |                                 </td>
 75 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 76 |                                     Actor
 77 |                                 </td>
 78 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 79 |                                   <span
 80 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 81 |                                     Active
 82 |                                   </span>
 83 |                                 </td>
 84 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 85 |                                     Owner
 86 |                                 </td>
 87 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
 88 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
 89 |                                 </td>
 90 |                             </tr>
 91 |                             </tbody>
 92 |                         </table>
 93 |                     </div>
 94 |                 </div>
 95 |             </div>
 96 |         </div>
 97 |     </base-panel>
 98 | 
 99 | 
100 |     <base-panel class="mt-4">
101 |         <h2 class="text-2xl font-medium">Steve forms</h2>
102 |         <div class="mt-4">
103 |             <div>
104 |                 <div class="flex flex-col sm:flex-row py-8">
105 |                     <div class="sm:w-1/4">
106 |                         <h2 class="text-xl">Account details</h2>
107 |                     </div>
108 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
109 |                         <base-input label="Name" placeholder="Name"></base-input>
110 |                         <base-input type="email" label="Email address" placeholder="Name"></base-input>
111 |                     </div>
112 |                 </div>
113 |                 <div class="flex py-8 flex-col sm:flex-row border-t border-gray-200">
114 |                     <div class="sm:w-1/4">
115 |                         <h2 class="text-xl">Account details</h2>
116 |                     </div>
117 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
118 |                         <base-input label="Name" placeholder="Name"></base-input>
119 |                         <base-input type="email" label="Email address" placeholder="Name"></base-input>
120 |                     </div>
121 |                 </div>
122 |             </div>
123 |         </div>
124 |     </base-panel>
125 | 
126 |     <base-panel class="mt-4">
127 |         <h2 class="text-2xl font-medium">Casual forms</h2>
128 |         <div class="mt-4">
129 |             <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
130 |                 <base-input label="Name" placeholder="Name"></base-input>
131 |                 <base-input type="email" label="Email address" placeholder="Name"></base-input>
132 |                 <base-input label="Name" placeholder="Name"></base-input>
133 |                 <base-input type="email" label="Email address" placeholder="Name"></base-input>
134 |             </div>
135 |         </div>
136 |     </base-panel>
137 | 
138 |     <base-panel class="mt-4">
139 |         <h2 class="text-2xl font-medium">Buttons</h2>
140 |         <div class="mt-4">
141 |             <button class="px-2 py-1 bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium rounded">Primary
142 |                 sm
143 |             </button>
144 |             <button class="px-2 py-1 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded">Success
145 |                 sm
146 |             </button>
147 |             <button class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded">Danger sm
148 |             </button>
149 | 
150 |             <button class="px-3 py-1 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary</button>
151 |             <button class="px-3 py-1 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success</button>
152 |             <button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger</button>
153 | 
154 |             <button class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary lg
155 |             </button>
156 |             <button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success lg</button>
157 |             <button class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger lg</button>
158 |         </div>
159 |     </base-panel>
160 | 
161 | @endsection
162 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/stacked/ui/index.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('header')
  4 |     <base-header title="UI Kit"></base-header>
  5 | @endsection
  6 | 
  7 | @section('content')
  8 | 
  9 |     <base-panel class="mt-4">
 10 |         <h2 class="text-2xl font-medium">Tables</h2>
 11 |         <div class="mt-4">
 12 |             <div class="flex flex-col">
 13 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
 14 |                     <div
 15 |                         class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
 16 |                         <table class="min-w-full">
 17 |                             <thead class="bg-gray-100">
 18 |                             <tr>
 19 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 20 |                                     Name
 21 |                                 </th>
 22 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 23 |                                     Title
 24 |                                 </th>
 25 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 26 |                                     Status
 27 |                                 </th>
 28 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" style="text-align: start">
 29 |                                     Role
 30 |                                 </th>
 31 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
 32 |                             </tr>
 33 |                             </thead>
 34 |                             <tbody class="bg-white">
 35 |                             <tr>
 36 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 37 |                                     <div class="flex items-center">
 38 |                                         <div class="flex-shrink-0 h-10 w-10">
 39 |                                             <img class="h-10 w-10 rounded-full"
 40 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 41 |                                                  alt=""/>
 42 |                                         </div>
 43 |                                         <div class="mx-2">
 44 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 45 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 46 |                                         </div>
 47 |                                     </div>
 48 |                                 </td>
 49 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 50 |                                     Software Engineer
 51 |                                 </td>
 52 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 53 |                                   <span
 54 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 55 |                                     Active
 56 |                                   </span>
 57 |                                 </td>
 58 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 59 |                                     Owner
 60 |                                 </td>
 61 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
 62 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
 63 |                                 </td>
 64 |                             </tr>
 65 |                             <tr>
 66 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 67 |                                     <div class="flex items-center">
 68 |                                         <div class="flex-shrink-0 h-10 w-10">
 69 |                                             <img class="h-10 w-10 rounded-full"
 70 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 71 |                                                  alt=""/>
 72 |                                         </div>
 73 |                                         <div class="mx-2">
 74 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 75 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 76 |                                         </div>
 77 |                                     </div>
 78 |                                 </td>
 79 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 80 |                                     Actor
 81 |                                 </td>
 82 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 83 |                                   <span
 84 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 85 |                                     Active
 86 |                                   </span>
 87 |                                 </td>
 88 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 89 |                                     Owner
 90 |                                 </td>
 91 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
 92 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
 93 |                                 </td>
 94 |                             </tr>
 95 |                             </tbody>
 96 |                         </table>
 97 |                     </div>
 98 |                 </div>
 99 |             </div>
100 |         </div>
101 |     </base-panel>
102 | 
103 | 
104 |     <base-panel class="mt-4">
105 |         <h2 class="text-2xl font-medium">Steve forms</h2>
106 |         <div class="mt-4">
107 |             <div>
108 |                 <div class="flex flex-col sm:flex-row py-8">
109 |                     <div class="sm:w-1/4">
110 |                         <h2 class="text-xl">Account details</h2>
111 |                     </div>
112 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
113 |                         <base-input label="Name" placeholder="Name"></base-input>
114 |                         <base-input type="email" label="Email address" placeholder="Name"></base-input>
115 |                     </div>
116 |                 </div>
117 |                 <div class="flex py-8 flex-col sm:flex-row border-t border-gray-200">
118 |                     <div class="sm:w-1/4">
119 |                         <h2 class="text-xl">Account details</h2>
120 |                     </div>
121 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
122 |                         <base-input label="Name" placeholder="Name"></base-input>
123 |                         <base-input type="email" label="Email address" placeholder="Name"></base-input>
124 |                     </div>
125 |                 </div>
126 |             </div>
127 |         </div>
128 |     </base-panel>
129 | 
130 |     <base-panel class="mt-4">
131 |         <h2 class="text-2xl font-medium">Casual forms</h2>
132 |         <div class="mt-4">
133 |             <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
134 |                 <base-input label="Name" placeholder="Name"></base-input>
135 |                 <base-input type="email" label="Email address" placeholder="Name"></base-input>
136 |                 <base-input label="Name" placeholder="Name"></base-input>
137 |                 <base-input type="email" label="Email address" placeholder="Name"></base-input>
138 |             </div>
139 |         </div>
140 |     </base-panel>
141 | 
142 |     <base-panel class="mt-4">
143 |         <h2 class="text-2xl font-medium">Buttons</h2>
144 |         <div class="mt-4">
145 |             <button class="px-2 py-1 bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium rounded">Primary
146 |                 sm
147 |             </button>
148 |             <button class="px-2 py-1 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded">Success
149 |                 sm
150 |             </button>
151 |             <button class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded">Danger sm
152 |             </button>
153 | 
154 |             <button class="px-3 py-1 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary</button>
155 |             <button class="px-3 py-1 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success</button>
156 |             <button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger</button>
157 | 
158 |             <button class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary lg
159 |             </button>
160 |             <button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success lg</button>
161 |             <button class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger lg</button>
162 |         </div>
163 |     </base-panel>
164 | 
165 | @endsection
166 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/sidebar/ui/index.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('content')
  4 | 
  5 |     <div class="bg-white p-6 rounded shadow">
  6 |         <h2 class="text-2xl font-medium">Tables</h2>
  7 |         <div class="mt-4">
  8 |             <div class="flex flex-col">
  9 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
 10 |                     <div
 11 |                         class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
 12 |                         <table class="min-w-full">
 13 |                             <thead class="bg-gray-100">
 14 |                             <tr>
 15 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 16 |                                     style="text-align: start">
 17 |                                     Name
 18 |                                 </th>
 19 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 20 |                                     style="text-align: start">
 21 |                                     Title
 22 |                                 </th>
 23 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 24 |                                     style="text-align: start">
 25 |                                     Status
 26 |                                 </th>
 27 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 28 |                                     style="text-align: start">
 29 |                                     Role
 30 |                                 </th>
 31 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
 32 |                             </tr>
 33 |                             </thead>
 34 |                             <tbody class="bg-white">
 35 |                             <tr>
 36 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 37 |                                     <div class="flex items-center">
 38 |                                         <div class="flex-shrink-0 h-10 w-10">
 39 |                                             <img class="h-10 w-10 rounded-full"
 40 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 41 |                                                  alt=""/>
 42 |                                         </div>
 43 |                                         <div class="mx-2">
 44 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 45 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 46 |                                         </div>
 47 |                                     </div>
 48 |                                 </td>
 49 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 50 |                                     Software Engineer
 51 |                                 </td>
 52 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 53 |                                   <span
 54 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 55 |                                     Active
 56 |                                   </span>
 57 |                                 </td>
 58 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 59 |                                     Owner
 60 |                                 </td>
 61 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
 62 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
 63 |                                 </td>
 64 |                             </tr>
 65 |                             <tr>
 66 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 67 |                                     <div class="flex items-center">
 68 |                                         <div class="flex-shrink-0 h-10 w-10">
 69 |                                             <img class="h-10 w-10 rounded-full"
 70 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 71 |                                                  alt=""/>
 72 |                                         </div>
 73 |                                         <div class="mx-2">
 74 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 75 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 76 |                                         </div>
 77 |                                     </div>
 78 |                                 </td>
 79 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 80 |                                     Actor
 81 |                                 </td>
 82 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 83 |                                   <span
 84 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 85 |                                     Active
 86 |                                   </span>
 87 |                                 </td>
 88 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 89 |                                     Owner
 90 |                                 </td>
 91 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
 92 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
 93 |                                 </td>
 94 |                             </tr>
 95 |                             </tbody>
 96 |                         </table>
 97 |                     </div>
 98 |                 </div>
 99 |             </div>
100 |         </div>
101 |     </div>
102 | 
103 |     <div class="bg-white p-6 rounded shadow mt-4">
104 |         <h2 class="text-2xl font-medium">Steve forms</h2>
105 |         <div class="mt-4">
106 |             <div>
107 |                 <div class="flex flex-col sm:flex-row py-8">
108 |                     <div class="sm:w-1/4">
109 |                         <h2 class="text-xl">Account details</h2>
110 |                     </div>
111 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
112 |                         <label class="block">
113 |                             <span class="text-gray-700">Name</span>
114 |                             <input
115 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
116 |                                 type="text">
117 |                         </label>
118 |                         <label class="block">
119 |                             <span class="text-gray-700">Email</span>
120 |                             <input
121 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
122 |                                 type="text">
123 |                         </label>
124 |                     </div>
125 |                 </div>
126 |                 <div class="flex py-8 flex-col sm:flex-row border-t border-gray-200">
127 |                     <div class="sm:w-1/4">
128 |                         <h2 class="text-xl">Account details</h2>
129 |                     </div>
130 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
131 |                         <label class="block">
132 |                             <span class="text-gray-700">Name</span>
133 |                             <input
134 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
135 |                                 type="text">
136 |                         </label>
137 |                         <label class="block">
138 |                             <span class="text-gray-700">Email</span>
139 |                             <input
140 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
141 |                                 type="text">
142 |                         </label>
143 |                     </div>
144 |                 </div>
145 |             </div>
146 |         </div>
147 |     </div>
148 | 
149 |     <div class="bg-white p-6 rounded shadow mt-4">
150 |         <h2 class="text-2xl font-medium">Casual forms</h2>
151 |         <div class="mt-4">
152 |             <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
153 |                 <label class="block">
154 |                     <span class="text-gray-700">Name</span>
155 |                     <input
156 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
157 |                         type="text">
158 |                 </label>
159 |                 <label class="block">
160 |                     <span class="text-gray-700">Email address</span>
161 |                     <input
162 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
163 |                         type="text">
164 |                 </label>
165 |                 <label class="block">
166 |                     <span class="text-gray-700">Name</span>
167 |                     <input
168 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
169 |                         type="text">
170 |                 </label>
171 |                 <label class="block">
172 |                     <span class="text-gray-700">Email address</span>
173 |                     <input
174 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
175 |                         type="text">
176 |                 </label>
177 |             </div>
178 |         </div>
179 |     </div>
180 | 
181 |     <div class="bg-white p-6 rounded shadow mt-4">
182 |         <h2 class="text-2xl font-medium">Buttons</h2>
183 |         <div class="mt-4">
184 |             <button class="px-2 py-1 bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium rounded">Primary
185 |                 sm
186 |             </button>
187 |             <button class="px-2 py-1 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded">Success
188 |                 sm
189 |             </button>
190 |             <button class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded">Danger sm
191 |             </button>
192 | 
193 |             <button class="px-3 py-1 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary</button>
194 |             <button class="px-3 py-1 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success</button>
195 |             <button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger</button>
196 | 
197 |             <button class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary lg
198 |             </button>
199 |             <button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success lg</button>
200 |             <button class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger lg</button>
201 |         </div>
202 |     </div>
203 | 
204 | @endsection
205 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/stacked/ui/index.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('header')
  4 |     <header class="bg-white shadow">
  5 |         <div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8">
  6 |             <h1 class="text-3xl font-bold leading-tight text-gray-900">Home</h1>
  7 |         </div>
  8 |     </header>
  9 | @endsection
 10 | 
 11 | @section('content')
 12 | 
 13 |     <div class="bg-white p-6 rounded shadow">
 14 |         <h2 class="text-2xl font-medium">Tables</h2>
 15 |         <div class="mt-4">
 16 |             <div class="flex flex-col">
 17 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
 18 |                     <div
 19 |                         class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
 20 |                         <table class="min-w-full">
 21 |                             <thead class="bg-gray-100">
 22 |                             <tr>
 23 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 24 |                                     style="text-align: start">
 25 |                                     Name
 26 |                                 </th>
 27 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 28 |                                     style="text-align: start">
 29 |                                     Title
 30 |                                 </th>
 31 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 32 |                                     style="text-align: start">
 33 |                                     Status
 34 |                                 </th>
 35 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
 36 |                                     style="text-align: start">
 37 |                                     Role
 38 |                                 </th>
 39 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
 40 |                             </tr>
 41 |                             </thead>
 42 |                             <tbody class="bg-white">
 43 |                             <tr>
 44 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 45 |                                     <div class="flex items-center">
 46 |                                         <div class="flex-shrink-0 h-10 w-10">
 47 |                                             <img class="h-10 w-10 rounded-full"
 48 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 49 |                                                  alt=""/>
 50 |                                         </div>
 51 |                                         <div class="mx-2">
 52 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 53 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 54 |                                         </div>
 55 |                                     </div>
 56 |                                 </td>
 57 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 58 |                                     Software Engineer
 59 |                                 </td>
 60 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 61 |                                   <span
 62 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 63 |                                     Active
 64 |                                   </span>
 65 |                                 </td>
 66 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 67 |                                     Owner
 68 |                                 </td>
 69 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
 70 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
 71 |                                 </td>
 72 |                             </tr>
 73 |                             <tr>
 74 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 75 |                                     <div class="flex items-center">
 76 |                                         <div class="flex-shrink-0 h-10 w-10">
 77 |                                             <img class="h-10 w-10 rounded-full"
 78 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
 79 |                                                  alt=""/>
 80 |                                         </div>
 81 |                                         <div class="mx-2">
 82 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
 83 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
 84 |                                         </div>
 85 |                                     </div>
 86 |                                 </td>
 87 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 88 |                                     Actor
 89 |                                 </td>
 90 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
 91 |                                   <span
 92 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
 93 |                                     Active
 94 |                                   </span>
 95 |                                 </td>
 96 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
 97 |                                     Owner
 98 |                                 </td>
 99 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
100 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
101 |                                 </td>
102 |                             </tr>
103 |                             </tbody>
104 |                         </table>
105 |                     </div>
106 |                 </div>
107 |             </div>
108 |         </div>
109 |     </div>
110 | 
111 |     <div class="bg-white p-6 rounded shadow mt-4">
112 |         <h2 class="text-2xl font-medium">Steve forms</h2>
113 |         <div class="mt-4">
114 |             <div>
115 |                 <div class="flex flex-col sm:flex-row py-8">
116 |                     <div class="sm:w-1/4">
117 |                         <h2 class="text-xl">Account details</h2>
118 |                     </div>
119 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
120 |                         <label class="block">
121 |                             <span class="text-gray-700">Name</span>
122 |                             <input
123 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
124 |                                 type="text">
125 |                         </label>
126 |                         <label class="block">
127 |                             <span class="text-gray-700">Email</span>
128 |                             <input
129 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
130 |                                 type="text">
131 |                         </label>
132 |                     </div>
133 |                 </div>
134 |                 <div class="flex py-8 flex-col sm:flex-row border-t border-gray-200">
135 |                     <div class="sm:w-1/4">
136 |                         <h2 class="text-xl">Account details</h2>
137 |                     </div>
138 |                     <div class="sm:w-3/4 grid grid-cols-1 sm:grid-cols-2 gap-6">
139 |                         <label class="block">
140 |                             <span class="text-gray-700">Name</span>
141 |                             <input
142 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
143 |                                 type="text">
144 |                         </label>
145 |                         <label class="block">
146 |                             <span class="text-gray-700">Email</span>
147 |                             <input
148 |                                 class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
149 |                                 type="text">
150 |                         </label>
151 |                     </div>
152 |                 </div>
153 |             </div>
154 |         </div>
155 |     </div>
156 | 
157 |     <div class="bg-white p-6 rounded shadow mt-4">
158 |         <h2 class="text-2xl font-medium">Casual forms</h2>
159 |         <div class="mt-4">
160 |             <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
161 |                 <label class="block">
162 |                     <span class="text-gray-700">Name</span>
163 |                     <input
164 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
165 |                         type="text">
166 |                 </label>
167 |                 <label class="block">
168 |                     <span class="text-gray-700">Email address</span>
169 |                     <input
170 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
171 |                         type="text">
172 |                 </label>
173 |                 <label class="block">
174 |                     <span class="text-gray-700">Name</span>
175 |                     <input
176 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
177 |                         type="text">
178 |                 </label>
179 |                 <label class="block">
180 |                     <span class="text-gray-700">Email address</span>
181 |                     <input
182 |                         class="form-input bg-gray-200 border-gray-300 focus:border-indigo-400 focus:shadow-none focus:bg-white mt-1 block w-full"
183 |                         type="text">
184 |                 </label>
185 |             </div>
186 |         </div>
187 |     </div>
188 | 
189 |     <div class="bg-white p-6 rounded shadow mt-4">
190 |         <h2 class="text-2xl font-medium">Buttons</h2>
191 |         <div class="mt-4">
192 |             <button class="px-2 py-1 bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium rounded">Primary
193 |                 sm
194 |             </button>
195 |             <button class="px-2 py-1 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded">Success
196 |                 sm
197 |             </button>
198 |             <button class="px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded">Danger sm
199 |             </button>
200 | 
201 |             <button class="px-3 py-1 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary</button>
202 |             <button class="px-3 py-1 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success</button>
203 |             <button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger</button>
204 | 
205 |             <button class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white font-medium rounded">Primary lg
206 |             </button>
207 |             <button class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-medium rounded">Success lg</button>
208 |             <button class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white font-medium rounded">Danger lg</button>
209 |         </div>
210 |     </div>
211 | 
212 | @endsection
213 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/sidebar/home.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('content')
  4 | 
  5 |     <div class="mx-auto w-full">
  6 |         <div>
  7 |             <!-- Card stats -->
  8 |             <div class="flex flex-wrap -mx-4">
  9 |                 <div class="w-full md:w-1/3 px-4">
 10 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 11 |                         <div class="flex-auto p-4">
 12 |                             <div class="flex flex-wrap">
 13 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 14 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 15 |                                         New users
 16 |                                     </h5>
 17 |                                     <span class="font-semibold text-xl text-gray-800">
 18 |                           2,356
 19 |                         </span>
 20 |                                 </div>
 21 |                                 <div class="relative w-auto px-2 flex-initial">
 22 |                                     <div
 23 |                                             class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-orange-500">
 24 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 25 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 26 |                                             <path
 27 |                                                     d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
 28 |                                         </svg>
 29 |                                     </div>
 30 |                                 </div>
 31 |                             </div>
 32 |                             <p class="text-sm text-gray-500 mt-4">
 33 |                       <span class="text-red-500 mr-2">
 34 |                         <i class="fas fa-arrow-down"></i> 3.48%
 35 |                       </span>
 36 |                                 <span class="whitespace-no-wrap">
 37 |                         Since last week
 38 |                       </span>
 39 |                             </p>
 40 |                         </div>
 41 |                     </div>
 42 |                 </div>
 43 |                 <div class="w-full md:w-1/3 px-4">
 44 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 45 |                         <div class="flex-auto p-4">
 46 |                             <div class="flex flex-wrap">
 47 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 48 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 49 |                                         Sales
 50 |                                     </h5>
 51 |                                     <span class="font-semibold text-xl text-gray-800">
 52 |                           924
 53 |                         </span>
 54 |                                 </div>
 55 |                                 <div class="relative w-auto px-2 flex-initial">
 56 |                                     <div
 57 |                                             class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-pink-500">
 58 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 59 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 60 |                                             <path
 61 |                                                     d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
 62 |                                         </svg>
 63 |                                     </div>
 64 |                                 </div>
 65 |                             </div>
 66 |                             <p class="text-sm text-gray-500 mt-4">
 67 |                       <span class="text-orange-500 mr-2">
 68 |                         <i class="fas fa-arrow-down"></i> 1.10%
 69 |                       </span>
 70 |                                 <span class="whitespace-no-wrap">
 71 |                         Since yesterday
 72 |                       </span>
 73 |                             </p>
 74 |                         </div>
 75 |                     </div>
 76 |                 </div>
 77 |                 <div class="w-full md:w-1/3 px-4">
 78 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 79 |                         <div class="flex-auto p-4">
 80 |                             <div class="flex flex-wrap">
 81 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 82 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 83 |                                         Performance
 84 |                                     </h5>
 85 |                                     <span class="font-semibold text-xl text-gray-800">
 86 |                           49,65%
 87 |                         </span>
 88 |                                 </div>
 89 |                                 <div class="relative w-auto px-2 flex-initial">
 90 |                                     <div
 91 |                                             class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-blue-500">
 92 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 93 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 94 |                                             <path
 95 |                                                     d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
 96 |                                         </svg>
 97 |                                     </div>
 98 |                                 </div>
 99 |                             </div>
100 |                             <p class="text-sm text-gray-500 mt-4">
101 |                       <span class="text-green-500 mr-2">
102 |                         <i class="fas fa-arrow-up"></i> 12%
103 |                       </span>
104 |                                 <span class="whitespace-no-wrap">
105 |                         Since last month
106 |                       </span>
107 |                             </p>
108 |                         </div>
109 |                     </div>
110 |                 </div>
111 |             </div>
112 |         </div>
113 |     </div>
114 | 
115 |     <div class="mt-12">
116 |         <h2 class="text-2xl font-medium">Tables</h2>
117 |         <div class="mt-4">
118 |             <div class="flex flex-col">
119 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
120 |                     <div
121 |                             class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
122 |                         <table class="min-w-full">
123 |                             <thead class="bg-gray-100">
124 |                             <tr>
125 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
126 |                                     style="text-align: start">
127 |                                     Name
128 |                                 </th>
129 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
130 |                                     style="text-align: start">
131 |                                     Title
132 |                                 </th>
133 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
134 |                                     style="text-align: start">
135 |                                     Status
136 |                                 </th>
137 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
138 |                                     style="text-align: start">
139 |                                     Role
140 |                                 </th>
141 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
142 |                             </tr>
143 |                             </thead>
144 |                             <tbody class="bg-white">
145 |                             <tr>
146 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
147 |                                     <div class="flex items-center">
148 |                                         <div class="flex-shrink-0 h-10 w-10">
149 |                                             <img class="h-10 w-10 rounded-full"
150 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
151 |                                                  alt=""/>
152 |                                         </div>
153 |                                         <div class="mx-2">
154 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
155 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
156 |                                         </div>
157 |                                     </div>
158 |                                 </td>
159 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
160 |                                     Software Engineer
161 |                                 </td>
162 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
163 |                                   <span
164 |                                           class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
165 |                                     Active
166 |                                   </span>
167 |                                 </td>
168 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
169 |                                     Owner
170 |                                 </td>
171 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
172 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
173 |                                 </td>
174 |                             </tr>
175 |                             <tr>
176 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
177 |                                     <div class="flex items-center">
178 |                                         <div class="flex-shrink-0 h-10 w-10">
179 |                                             <img class="h-10 w-10 rounded-full"
180 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
181 |                                                  alt=""/>
182 |                                         </div>
183 |                                         <div class="mx-2">
184 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
185 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
186 |                                         </div>
187 |                                     </div>
188 |                                 </td>
189 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
190 |                                     Actor
191 |                                 </td>
192 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
193 |                                   <span
194 |                                           class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
195 |                                     Active
196 |                                   </span>
197 |                                 </td>
198 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
199 |                                     Owner
200 |                                 </td>
201 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
202 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
203 |                                 </td>
204 |                             </tr>
205 |                             </tbody>
206 |                         </table>
207 |                     </div>
208 |                 </div>
209 |             </div>
210 |         </div>
211 |     </div>
212 | 
213 | 
214 | 
215 | @endsection
216 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/sidebar/home.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('content')
  4 | 
  5 |     <div class="mx-auto w-full">
  6 |         <div>
  7 |             <!-- Card stats -->
  8 |             <div class="flex flex-wrap -mx-4">
  9 |                 <div class="w-full md:w-1/3 px-4">
 10 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 11 |                         <div class="flex-auto p-4">
 12 |                             <div class="flex flex-wrap">
 13 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 14 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 15 |                                         New users
 16 |                                     </h5>
 17 |                                     <span class="font-semibold text-xl text-gray-800">
 18 |                           2,356
 19 |                         </span>
 20 |                                 </div>
 21 |                                 <div class="relative w-auto px-2 flex-initial">
 22 |                                     <div
 23 |                                             class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-orange-500">
 24 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 25 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 26 |                                             <path
 27 |                                                     d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
 28 |                                         </svg>
 29 |                                     </div>
 30 |                                 </div>
 31 |                             </div>
 32 |                             <p class="text-sm text-gray-500 mt-4">
 33 |                       <span class="text-red-500 mr-2">
 34 |                         <i class="fas fa-arrow-down"></i> 3.48%
 35 |                       </span>
 36 |                                 <span class="whitespace-no-wrap">
 37 |                         Since last week
 38 |                       </span>
 39 |                             </p>
 40 |                         </div>
 41 |                     </div>
 42 |                 </div>
 43 |                 <div class="w-full md:w-1/3 px-4">
 44 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 45 |                         <div class="flex-auto p-4">
 46 |                             <div class="flex flex-wrap">
 47 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 48 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 49 |                                         Sales
 50 |                                     </h5>
 51 |                                     <span class="font-semibold text-xl text-gray-800">
 52 |                           924
 53 |                         </span>
 54 |                                 </div>
 55 |                                 <div class="relative w-auto px-2 flex-initial">
 56 |                                     <div
 57 |                                             class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-pink-500">
 58 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 59 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 60 |                                             <path
 61 |                                                     d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
 62 |                                         </svg>
 63 |                                     </div>
 64 |                                 </div>
 65 |                             </div>
 66 |                             <p class="text-sm text-gray-500 mt-4">
 67 |                       <span class="text-orange-500 mr-2">
 68 |                         <i class="fas fa-arrow-down"></i> 1.10%
 69 |                       </span>
 70 |                                 <span class="whitespace-no-wrap">
 71 |                         Since yesterday
 72 |                       </span>
 73 |                             </p>
 74 |                         </div>
 75 |                     </div>
 76 |                 </div>
 77 |                 <div class="w-full md:w-1/3 px-4">
 78 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 79 |                         <div class="flex-auto p-4">
 80 |                             <div class="flex flex-wrap">
 81 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 82 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 83 |                                         Performance
 84 |                                     </h5>
 85 |                                     <span class="font-semibold text-xl text-gray-800">
 86 |                           49,65%
 87 |                         </span>
 88 |                                 </div>
 89 |                                 <div class="relative w-auto px-2 flex-initial">
 90 |                                     <div
 91 |                                             class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-blue-500">
 92 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 93 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 94 |                                             <path
 95 |                                                     d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
 96 |                                         </svg>
 97 |                                     </div>
 98 |                                 </div>
 99 |                             </div>
100 |                             <p class="text-sm text-gray-500 mt-4">
101 |                       <span class="text-green-500 mr-2">
102 |                         <i class="fas fa-arrow-up"></i> 12%
103 |                       </span>
104 |                                 <span class="whitespace-no-wrap">
105 |                         Since last month
106 |                       </span>
107 |                             </p>
108 |                         </div>
109 |                     </div>
110 |                 </div>
111 |             </div>
112 |         </div>
113 |     </div>
114 | 
115 |     <div class="mt-12">
116 |         <h2 class="text-2xl font-medium">Tables</h2>
117 |         <div class="mt-4">
118 |             <div class="flex flex-col">
119 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
120 |                     <div
121 |                             class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
122 |                         <table class="min-w-full">
123 |                             <thead class="bg-gray-100">
124 |                             <tr>
125 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
126 |                                     style="text-align: start">
127 |                                     Name
128 |                                 </th>
129 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
130 |                                     style="text-align: start">
131 |                                     Title
132 |                                 </th>
133 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
134 |                                     style="text-align: start">
135 |                                     Status
136 |                                 </th>
137 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
138 |                                     style="text-align: start">
139 |                                     Role
140 |                                 </th>
141 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
142 |                             </tr>
143 |                             </thead>
144 |                             <tbody class="bg-white">
145 |                             <tr>
146 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
147 |                                     <div class="flex items-center">
148 |                                         <div class="flex-shrink-0 h-10 w-10">
149 |                                             <img class="h-10 w-10 rounded-full"
150 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
151 |                                                  alt=""/>
152 |                                         </div>
153 |                                         <div class="mx-2">
154 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
155 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
156 |                                         </div>
157 |                                     </div>
158 |                                 </td>
159 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
160 |                                     Software Engineer
161 |                                 </td>
162 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
163 |                                   <span
164 |                                           class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
165 |                                     Active
166 |                                   </span>
167 |                                 </td>
168 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
169 |                                     Owner
170 |                                 </td>
171 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
172 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
173 |                                 </td>
174 |                             </tr>
175 |                             <tr>
176 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
177 |                                     <div class="flex items-center">
178 |                                         <div class="flex-shrink-0 h-10 w-10">
179 |                                             <img class="h-10 w-10 rounded-full"
180 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
181 |                                                  alt=""/>
182 |                                         </div>
183 |                                         <div class="mx-2">
184 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
185 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
186 |                                         </div>
187 |                                     </div>
188 |                                 </td>
189 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
190 |                                     Actor
191 |                                 </td>
192 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
193 |                                   <span
194 |                                           class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
195 |                                     Active
196 |                                   </span>
197 |                                 </td>
198 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
199 |                                     Owner
200 |                                 </td>
201 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
202 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
203 |                                 </td>
204 |                             </tr>
205 |                             </tbody>
206 |                         </table>
207 |                     </div>
208 |                 </div>
209 |             </div>
210 |         </div>
211 |     </div>
212 | 
213 | 
214 | 
215 | @endsection
216 | 


--------------------------------------------------------------------------------
/src/stubs/resources/vue/stacked/home.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('header')
  4 |     <base-header title="Home"></base-header>
  5 | @endsection
  6 | 
  7 | @section('content')
  8 | 
  9 |     <div class="mx-auto w-full">
 10 |         <div>
 11 |             <!-- Card stats -->
 12 |             <div class="flex flex-wrap -mx-4">
 13 |                 <div class="w-full md:w-1/3 px-4">
 14 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 15 |                         <div class="flex-auto p-4">
 16 |                             <div class="flex flex-wrap">
 17 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 18 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 19 |                                         New users
 20 |                                     </h5>
 21 |                                     <span class="font-semibold text-xl text-gray-800">
 22 |                           2,356
 23 |                         </span>
 24 |                                 </div>
 25 |                                 <div class="relative w-auto px-2 flex-initial">
 26 |                                     <div
 27 |                                         class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-orange-500">
 28 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 29 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 30 |                                             <path
 31 |                                                 d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
 32 |                                         </svg>
 33 |                                     </div>
 34 |                                 </div>
 35 |                             </div>
 36 |                             <p class="text-sm text-gray-500 mt-4">
 37 |                       <span class="text-red-500 mr-2">
 38 |                         <i class="fas fa-arrow-down"></i> 3.48%
 39 |                       </span>
 40 |                                 <span class="whitespace-no-wrap">
 41 |                         Since last week
 42 |                       </span>
 43 |                             </p>
 44 |                         </div>
 45 |                     </div>
 46 |                 </div>
 47 |                 <div class="w-full md:w-1/3 px-4">
 48 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 49 |                         <div class="flex-auto p-4">
 50 |                             <div class="flex flex-wrap">
 51 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 52 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 53 |                                         Sales
 54 |                                     </h5>
 55 |                                     <span class="font-semibold text-xl text-gray-800">
 56 |                           924
 57 |                         </span>
 58 |                                 </div>
 59 |                                 <div class="relative w-auto px-2 flex-initial">
 60 |                                     <div
 61 |                                         class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-pink-500">
 62 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 63 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 64 |                                             <path
 65 |                                                 d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
 66 |                                         </svg>
 67 |                                     </div>
 68 |                                 </div>
 69 |                             </div>
 70 |                             <p class="text-sm text-gray-500 mt-4">
 71 |                       <span class="text-orange-500 mr-2">
 72 |                         <i class="fas fa-arrow-down"></i> 1.10%
 73 |                       </span>
 74 |                                 <span class="whitespace-no-wrap">
 75 |                         Since yesterday
 76 |                       </span>
 77 |                             </p>
 78 |                         </div>
 79 |                     </div>
 80 |                 </div>
 81 |                 <div class="w-full md:w-1/3 px-4">
 82 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 83 |                         <div class="flex-auto p-4">
 84 |                             <div class="flex flex-wrap">
 85 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 86 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 87 |                                         Performance
 88 |                                     </h5>
 89 |                                     <span class="font-semibold text-xl text-gray-800">
 90 |                           49,65%
 91 |                         </span>
 92 |                                 </div>
 93 |                                 <div class="relative w-auto px-2 flex-initial">
 94 |                                     <div
 95 |                                         class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-blue-500">
 96 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 97 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 98 |                                             <path
 99 |                                                 d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
100 |                                         </svg>
101 |                                     </div>
102 |                                 </div>
103 |                             </div>
104 |                             <p class="text-sm text-gray-500 mt-4">
105 |                       <span class="text-green-500 mr-2">
106 |                         <i class="fas fa-arrow-up"></i> 12%
107 |                       </span>
108 |                                 <span class="whitespace-no-wrap">
109 |                         Since last month
110 |                       </span>
111 |                             </p>
112 |                         </div>
113 |                     </div>
114 |                 </div>
115 |             </div>
116 |         </div>
117 |     </div>
118 | 
119 |     <div class="mt-12">
120 |         <h2 class="text-2xl font-medium">Tables</h2>
121 |         <div class="mt-4">
122 |             <div class="flex flex-col">
123 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
124 |                     <div
125 |                         class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
126 |                         <table class="min-w-full">
127 |                             <thead class="bg-gray-100">
128 |                             <tr>
129 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
130 |                                     style="text-align: start">
131 |                                     Name
132 |                                 </th>
133 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
134 |                                     style="text-align: start">
135 |                                     Title
136 |                                 </th>
137 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
138 |                                     style="text-align: start">
139 |                                     Status
140 |                                 </th>
141 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
142 |                                     style="text-align: start">
143 |                                     Role
144 |                                 </th>
145 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
146 |                             </tr>
147 |                             </thead>
148 |                             <tbody class="bg-white">
149 |                             <tr>
150 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
151 |                                     <div class="flex items-center">
152 |                                         <div class="flex-shrink-0 h-10 w-10">
153 |                                             <img class="h-10 w-10 rounded-full"
154 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
155 |                                                  alt=""/>
156 |                                         </div>
157 |                                         <div class="mx-2">
158 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
159 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
160 |                                         </div>
161 |                                     </div>
162 |                                 </td>
163 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
164 |                                     Software Engineer
165 |                                 </td>
166 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
167 |                                   <span
168 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
169 |                                     Active
170 |                                   </span>
171 |                                 </td>
172 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
173 |                                     Owner
174 |                                 </td>
175 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
176 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
177 |                                 </td>
178 |                             </tr>
179 |                             <tr>
180 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
181 |                                     <div class="flex items-center">
182 |                                         <div class="flex-shrink-0 h-10 w-10">
183 |                                             <img class="h-10 w-10 rounded-full"
184 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
185 |                                                  alt=""/>
186 |                                         </div>
187 |                                         <div class="mx-2">
188 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
189 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
190 |                                         </div>
191 |                                     </div>
192 |                                 </td>
193 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
194 |                                     Actor
195 |                                 </td>
196 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
197 |                                   <span
198 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
199 |                                     Active
200 |                                   </span>
201 |                                 </td>
202 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
203 |                                     Owner
204 |                                 </td>
205 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
206 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
207 |                                 </td>
208 |                             </tr>
209 |                             </tbody>
210 |                         </table>
211 |                     </div>
212 |                 </div>
213 |             </div>
214 |         </div>
215 |     </div>
216 | 
217 | @endsection
218 | 


--------------------------------------------------------------------------------
/src/stubs/resources/alpine/stacked/home.blade.php:
--------------------------------------------------------------------------------
  1 | @extends('layouts.app')
  2 | 
  3 | @section('header')
  4 |     <header class="bg-white shadow">
  5 |         <div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8">
  6 |             <h1 class="text-3xl font-bold leading-tight text-gray-900">Home</h1>
  7 |         </div>
  8 |     </header>
  9 | @endsection
 10 | 
 11 | @section('content')
 12 | 
 13 |     <div class="mx-auto w-full">
 14 |         <div>
 15 |             <!-- Card stats -->
 16 |             <div class="flex flex-wrap -mx-4">
 17 |                 <div class="w-full md:w-1/3 px-4">
 18 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 19 |                         <div class="flex-auto p-4">
 20 |                             <div class="flex flex-wrap">
 21 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 22 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 23 |                                         New users
 24 |                                     </h5>
 25 |                                     <span class="font-semibold text-xl text-gray-800">
 26 |                           2,356
 27 |                         </span>
 28 |                                 </div>
 29 |                                 <div class="relative w-auto px-2 flex-initial">
 30 |                                     <div
 31 |                                         class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-orange-500">
 32 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 33 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 34 |                                             <path
 35 |                                                 d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
 36 |                                         </svg>
 37 |                                     </div>
 38 |                                 </div>
 39 |                             </div>
 40 |                             <p class="text-sm text-gray-500 mt-4">
 41 |                       <span class="text-red-500 mr-2">
 42 |                         <i class="fas fa-arrow-down"></i> 3.48%
 43 |                       </span>
 44 |                                 <span class="whitespace-no-wrap">
 45 |                         Since last week
 46 |                       </span>
 47 |                             </p>
 48 |                         </div>
 49 |                     </div>
 50 |                 </div>
 51 |                 <div class="w-full md:w-1/3 px-4">
 52 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 53 |                         <div class="flex-auto p-4">
 54 |                             <div class="flex flex-wrap">
 55 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 56 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 57 |                                         Sales
 58 |                                     </h5>
 59 |                                     <span class="font-semibold text-xl text-gray-800">
 60 |                           924
 61 |                         </span>
 62 |                                 </div>
 63 |                                 <div class="relative w-auto px-2 flex-initial">
 64 |                                     <div
 65 |                                         class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-pink-500">
 66 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
 67 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
 68 |                                             <path
 69 |                                                 d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
 70 |                                         </svg>
 71 |                                     </div>
 72 |                                 </div>
 73 |                             </div>
 74 |                             <p class="text-sm text-gray-500 mt-4">
 75 |                       <span class="text-orange-500 mr-2">
 76 |                         <i class="fas fa-arrow-down"></i> 1.10%
 77 |                       </span>
 78 |                                 <span class="whitespace-no-wrap">
 79 |                         Since yesterday
 80 |                       </span>
 81 |                             </p>
 82 |                         </div>
 83 |                     </div>
 84 |                 </div>
 85 |                 <div class="w-full md:w-1/3 px-4">
 86 |                     <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
 87 |                         <div class="flex-auto p-4">
 88 |                             <div class="flex flex-wrap">
 89 |                                 <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
 90 |                                     <h5 class="text-gray-500 uppercase font-bold text-xs">
 91 |                                         Performance
 92 |                                     </h5>
 93 |                                     <span class="font-semibold text-xl text-gray-800">
 94 |                           49,65%
 95 |                         </span>
 96 |                                 </div>
 97 |                                 <div class="relative w-auto px-2 flex-initial">
 98 |                                     <div
 99 |                                         class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-blue-500">
100 |                                         <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
101 |                                              stroke-width="2" stroke="currentColor" viewBox="0 0 24 24">
102 |                                             <path
103 |                                                 d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
104 |                                         </svg>
105 |                                     </div>
106 |                                 </div>
107 |                             </div>
108 |                             <p class="text-sm text-gray-500 mt-4">
109 |                       <span class="text-green-500 mr-2">
110 |                         <i class="fas fa-arrow-up"></i> 12%
111 |                       </span>
112 |                                 <span class="whitespace-no-wrap">
113 |                         Since last month
114 |                       </span>
115 |                             </p>
116 |                         </div>
117 |                     </div>
118 |                 </div>
119 |             </div>
120 |         </div>
121 |     </div>
122 | 
123 |     <div class="mt-12">
124 |         <h2 class="text-2xl font-medium">Tables</h2>
125 |         <div class="mt-4">
126 |             <div class="flex flex-col">
127 |                 <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6">
128 |                     <div
129 |                         class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
130 |                         <table class="min-w-full">
131 |                             <thead class="bg-gray-100">
132 |                             <tr>
133 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-right text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
134 |                                     style="text-align: start">
135 |                                     Name
136 |                                 </th>
137 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
138 |                                     style="text-align: start">
139 |                                     Title
140 |                                 </th>
141 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
142 |                                     style="text-align: start">
143 |                                     Status
144 |                                 </th>
145 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
146 |                                     style="text-align: start">
147 |                                     Role
148 |                                 </th>
149 |                                 <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
150 |                             </tr>
151 |                             </thead>
152 |                             <tbody class="bg-white">
153 |                             <tr>
154 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
155 |                                     <div class="flex items-center">
156 |                                         <div class="flex-shrink-0 h-10 w-10">
157 |                                             <img class="h-10 w-10 rounded-full"
158 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
159 |                                                  alt=""/>
160 |                                         </div>
161 |                                         <div class="mx-2">
162 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
163 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
164 |                                         </div>
165 |                                     </div>
166 |                                 </td>
167 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
168 |                                     Software Engineer
169 |                                 </td>
170 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
171 |                                   <span
172 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
173 |                                     Active
174 |                                   </span>
175 |                                 </td>
176 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
177 |                                     Owner
178 |                                 </td>
179 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
180 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
181 |                                 </td>
182 |                             </tr>
183 |                             <tr>
184 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
185 |                                     <div class="flex items-center">
186 |                                         <div class="flex-shrink-0 h-10 w-10">
187 |                                             <img class="h-10 w-10 rounded-full"
188 |                                                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
189 |                                                  alt=""/>
190 |                                         </div>
191 |                                         <div class="mx-2">
192 |                                             <div class="text-sm leading-5 font-medium text-gray-900">Jone Doe</div>
193 |                                             <div class="text-sm leading-5 text-gray-500">bernardlane@example.com</div>
194 |                                         </div>
195 |                                     </div>
196 |                                 </td>
197 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
198 |                                     Actor
199 |                                 </td>
200 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
201 |                                   <span
202 |                                       class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
203 |                                     Active
204 |                                   </span>
205 |                                 </td>
206 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
207 |                                     Owner
208 |                                 </td>
209 |                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium">
210 |                                     <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
211 |                                 </td>
212 |                             </tr>
213 |                             </tbody>
214 |                         </table>
215 |                     </div>
216 |                 </div>
217 |             </div>
218 |         </div>
219 |     </div>
220 | 
221 | @endsection
222 | 


--------------------------------------------------------------------------------