Add Badge component

app/View/Page/Header.php

@@ -7,7 +7,7 @@ use Illuminate\View\Component;
 class Header extends Component
 {
 
-    public function __construct(public string $title, public bool $closeable = false)
+    public function __construct(public string $title)
     {
     }
 
@@ -15,17 +15,12 @@ class Header extends Component
     {
         return <<<'HTML'
             <div class="h-16 px-6 flex items-center justify-between border-b border-solid border-gray-600 group-[.is-bright]:border-gray-500">
-                <div class="flex items-center space-x-2">
+                <div class="flex items-center space-x-4">
                     {{ $beforeTitle ?? ''}}
                     <span class="text-sm md:text-xl font-semibold leading-none text-white">{{ $title }}</span>
                     {{ $toolbar ?? '' }}
                 </div>
                 <div class="flex items-center space-x-4 ml-2">
-                    @if ($closeable)
-                    <a href="#" class="btn label btn-primary-light icon" wire:click="close">
-                        <ui-sprite class="w-3 h-3" src="close"></ui-sprite>
-                    </a>
-                    @endif
                     {{ $right ?? '' }}
                 </div>
             </div>

app/View/Page/Layout.php

@@ -28,7 +28,7 @@ class Layout extends Component
                 <div class="grow bg-gray-900 flex flex-col duration-300 navbar:ml-60">
                     <x-page::header title="{{ session()->get('title') }}">
                         <x-slot:beforeTitle>
-                            <a href="#" class="mr-2 lg:hidden" wire:click.prevent="dispatch('toggle-sidebar')">
+                            <a href="#" class="lg:hidden" wire:click.prevent="dispatch('toggle-sidebar')">
                                 <x-ui::sprite src="menu" class="text-gray-100 w-5 h-5"></x-ui::sprite>
                             </a>
                         </x-slot:beforeTitle>

app/View/Page/SettingLayout.php

@@ -27,6 +27,9 @@ class SettingLayout extends Component
                 <x-slot:right>
                     {{ $right ?? '' }}
                 </x-slot:right>
+                <x-slot:toolbar>
+                    {{ $toolbar ?? '' }}
+                </x-slot:toolbar>
                 <div class="flex grow relative">
                     <x-ui::menulist :entries="$entries"></x-ui::menulist>
                     <div class="grow">

app/View/Ui/Badge.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Ui;
+
+use App\View\Traits\HasColors;
+use Illuminate\View\Component;
+
+class Badge extends Component
+{
+
+    use HasColors;
+
+    public function __construct(
+        public string $icon,
+        public string $variant = 'primary'
+    ) {
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            <button type="button" href="#" {{ $attributes }} class="h-6 px-3 space-x-2 items-center rounded-full {{ $allColors($variant) }} hidden lg:flex">
+                <x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
+                <span class="text-sm">
+                    {{$slot}}
+                </span>
+            </button>
+            <button type="button" x-tooltip.raw="{{$slot}}" href="#" {{ $attributes }} class="h-6 px-3 space-x-2 flex items-center rounded-full {{ $allColors($variant) }} lg:hidden">
+                <x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
+            </button>
+        HTML;
+    }
+}

modules/Mailgateway/Components/setting-view.blade.php

@@ -1,4 +1,7 @@
 <x-page::setting-layout :active="$settingClass">
+    <x-slot:toolbar>
+        <x-ui::badge wire:click.prevent="$dispatch('openModal', {component: 'modules.mailgateway.components.form', props: {}, title: 'Verbindung erstellen'})" icon="plus">Neue Verbindung</x-ui::badge>
+    </x-slot:toolbar>
     <div>
         <x-ui::table>
             <thead>
@@ -9,7 +12,6 @@
                 <th>Aktion</th>
             </thead>
 
-            <x-ui::action wire:click.prevent="$dispatch('openModal', {component: 'modules.mailgateway.components.form', props: {}, title: 'Verbindung erstellen'})" icon="plus" variant="danger">Neu</x-ui::action>
 
             @foreach ($data as $index => $gateway)
             <tr wire:key="$index">