separate component views

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

@@ -0,0 +1,10 @@
+@props(['title' => ''])
+
+<x-card 
+    {{ $attributes->merge(['class' => 'bg-slate-100 dark:bg-base-200 rounded-lg']) }} 
+>
+
+    <h2 class="text-xl mb-2"> {{ $title }} </h2>
+
+    {{ $slot }}
+</x-card>

resources/views/components/ib-drawer.blade.php

@@ -0,0 +1,38 @@
+@props([
+    'key' => 'drawer',
+    'showClose' => true,
+    'closeOnEscape' => true,
+    'title' => null,
+    'subtitle' => null
+])
+
+<div 
+    x-data="{ open: false }" 
+    x-on:toggle-{{ $key }}.window="open = !open"
+    x-show="open"
+    @if($closeOnEscape)
+        @keydown.window.escape="open = false"
+    @endif
+    x-trap="open" 
+    x-bind:inert="!open"
+    class="fixed inset-0 flex justify-end z-50" 
+    x-transition.opacity
+    x-cloak
+>
+
+    <div @click="open = false" class="fixed inset-0 bg-black opacity-50"></div>
+
+    <x-card 
+        :title="$title"
+        :subtitle="$subtitle"
+        {{ $attributes->merge(['class' => 'min-h-screen w-11/12 lg:w-1/3 rounded-none px-8 transition']) }} 
+    >
+
+        @if ($showClose)
+            <x-button icon="o-x-mark" class="btn-ghost btn-circle btn-sm absolute top-4 right-4 " @click="open = false" />
+        @endif
+
+        {{ $slot }}
+
+    </x-card>
+</div>

resources/views/components/ib-toolbar.blade.php

@@ -0,0 +1,7 @@
+@props(['title' => ''])
+
+<div {{ $attributes->merge(['class' => 'flex mb-6']) }} class="">
+    <h1 class="text-2xl font-medium mr-3"> {{ $title }} </h1>
+    
+    {{ $slot }}
+</div>

resources/views/livewire/portfolio/create.blade.php

@@ -12,5 +12,8 @@ new class extends Component {
     
 }; ?>
 <div>  
+
+    <x-ib-toolbar title="Create Portfolio" />
+
     <livewire:portfolio.manage-portfolio-form submit="save" />
 </div>

routes/web.php

@@ -2,8 +2,6 @@
 
 use Livewire\Volt\Volt;
 use Illuminate\Support\Facades\Route;
-use App\Http\Controllers\PortfolioController;
-use App\Livewire\ShowPortfolio;
 
 Route::get('/', function () {
     return view('welcome');
@@ -11,16 +9,9 @@ Route::get('/', function () {
 
 Route::middleware(['auth:sanctum', config('jetstream.auth_session'), 'verified'])->group(function () {
 
-    Route::get('/dashboard', function () {
-        return view('dashboard');
-    })->name('dashboard');
+    Volt::route('/dashboard', 'dashboard')->name('dashboard');
 
     Volt::route('/portfolio/create', 'portfolio.create')->name('portfolio.create');
     Volt::route('/portfolio/{portfolio}', 'portfolio.show')->name('portfolio.show');
 
-
-    // Route::get('portfolio/{portfolio}', ShowPortfolio::class)->name('portfolio.show');
-    // Route::get('portfolio', ShowPortfolio::class)->name('portfolio.create');
-    // Route::resource('portfolio', PortfolioController::class)->only(['show', 'create']);
-
 });