button components

app/Http/Livewire/PrivateKey/Create.php

@@ -16,12 +16,13 @@ class Create extends Component
         if (!str_ends_with($this->private_key_value, "\n")) {
             $this->private_key_value .= "\n";
         }
-        PrivateKey::create([
+        $new_private_key = PrivateKey::create([
             'name' => $this->private_key_name,
             'description' => $this->private_key_description,
             'private_key' => $this->private_key_value,
             'team_id' => session('currentTeam')->id
         ]);
         session('currentTeam')->privateKeys = PrivateKey::where('team_id', session('currentTeam')->id)->get();
+        redirect()->route('private-key.show', $new_private_key->uuid);
     }
 }

app/View/Components/FormInput.php

@@ -1,34 +0,0 @@
-<?php
-
-namespace App\View\Components;
-
-use Closure;
-use Illuminate\Contracts\View\View;
-use Illuminate\View\Component;
-
-class FormInput extends Component
-{
-    /**
-     * Create a new component instance.
-     */
-    public function __construct(
-        public string $id,
-        public bool $required = false,
-        public bool $readonly = false,
-        public string|null $label = null,
-        public string|null $type = 'text',
-        public string|null $class = "",
-        public bool $instantSave = false,
-        public bool $disabled = false,
-        public bool $hidden = false
-    ) {
-    }
-
-    /**
-     * Get the view / contents that represent the component.
-     */
-    public function render(): View|Closure|string
-    {
-        return view('components.form-input');
-    }
-}

app/View/Components/Input.php

@@ -1,30 +0,0 @@
-<?php
-
-namespace App\View\Components;
-
-use Closure;
-use Illuminate\Contracts\View\View;
-use Illuminate\View\Component;
-
-class Input extends Component
-{
-    /**
-     * Create a new component instance.
-     */
-    public function __construct(
-        public string $id,
-        public bool $required = false,
-        public bool $readonly = false,
-        public string|null $label = null,
-        public string|null $type = 'text',
-    ) {
-    }
-
-    /**
-     * Get the view / contents that represent the component.
-     */
-    public function render(): View|Closure|string
-    {
-        return view('components.input');
-    }
-}

resources/views/auth/login.blade.php

@@ -12,7 +12,7 @@
             <input type="text" name="email" placeholder="email" @env('local') value="test@example.com" @endenv
                 autofocus />
             <input type="password" name="password" placeho lder="Password" @env('local') value="password" @endenv />
-            <button type="submit">Login</button>
+            <x-inputs.button type="submit">Login</x-inputs.button>
         </form>
         @if ($errors->any())
             <div class="alert alert-danger">

resources/views/auth/register.blade.php

@@ -9,7 +9,7 @@
         <input type="password" name="password" placeholder="Password" @env('local') value="password" @endenv />
         <input type="password" name="password_confirmation" placeholder="Password"
             @env('local') value="password" @endenv />
-        <button type="submit">Register</button>
+        <x-inputs.button type="submit">Register</x-inputs.button>
     </form>
     @if ($errors->any())
         <div class="alert alert-danger">

resources/views/components/confirm-modal.blade.php

@@ -16,8 +16,8 @@
         <div class="flex flex-col items-center justify-center h-full">
             <div class="pb-5 text-white" x-text="message"></div>
             <div>
-                <button x-on:click="open = false">Cancel</button>
-                <button x-on:click="$dispatch('confirm')">Confirm</button>
+                <x-inputs.button x-on:click="$dispatch('confirm')">Confirm</x-inputs.button>
+                <x-inputs.button x-on:click="open = false">Cancel</x-inputs.button>
             </div>
         </div>
     </div>

resources/views/components/input.blade.php

@@ -1,11 +0,0 @@
-<label for={{ $id }}>
-    @if ($label)
-        {{ $label }}
-    @else
-        {{ $id }}
-    @endif
-    @if ($required)
-        *
-    @endif
-    <input id={{ $id }} type={{ $type }} wire:model.defer={{ $id }}>
-</label>

resources/views/components/inputs/button.blade.php

@@ -0,0 +1,13 @@
+@props([
+    'defaultClass' => 'bg-indigo-500',
+    'confirm' => null,
+    'confirmAction' => null,
+])
+
+<button {{ $attributes }} {{ $attributes->merge(['class' => $defaultClass]) }}
+    @if ($attributes->whereStartsWith('wire:click')) wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}"
+    wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:loading.class.remove="{{ $defaultClass }} {{ $attributes->whereStartsWith('class')->first() }}" @endif
+    @isset($confirm) x-on:click="toggleConfirmModal('{{ $confirm }}')" @endisset
+    @isset($confirmAction) @confirm.window="$wire.{{ $confirmAction }}()" @endisset>
+    {{ $slot }}
+</button>

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

@@ -1,3 +1,15 @@
+@props([
+    'id' => null,
+    'required' => false,
+    'readonly' => false,
+    'label' => null,
+    'type' => 'text',
+    'class' => '',
+    'instantSave' => false,
+    'disabled' => false,
+    'hidden' => false,
+])
+
 @if ($type === 'checkbox')
     <label for={{ $id }}>
         @if ($label)

resources/views/components/navbar.blade.php

@@ -11,7 +11,7 @@
         @endif
         <form action="/logout" method="POST">
             @csrf
-            <button type="submit">Logout</button>
+            <x-inputs.button type="submit">Logout</x-inputs.button>
         </form>
         <livewire:check-update />
         <livewire:force-upgrade />

resources/views/dashboard.blade.php

@@ -1,23 +1,31 @@
 <x-layout>
-    <h1>Projects <a href="{{ route('project.new') }}"><button>New</button></a></h1>
+    <h1>Projects <a href="{{ route('project.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($projects as $project)
         <a href="{{ route('project.environments', [$project->uuid]) }}">{{ data_get($project, 'name') }}</a>
     @empty
         <p>No projects found.</p>
     @endforelse
-    <h1>Servers <a href="{{ route('server.new') }}"><button>New</button></a></h1>
+    <h1>Servers <a href="{{ route('server.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($servers as $server)
         <a href="{{ route('server.show', [$server->uuid]) }}">{{ data_get($server, 'name') }}</a>
     @empty
         <p>No servers found.</p>
     @endforelse
-    <h1>Destinations <a href="{{ route('destination.new') }}"><button>New</button></a></h1>
+    <h1>Destinations <a href="{{ route('destination.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($destinations as $destination)
         <a href="{{ route('destination.show', [$destination->uuid]) }}">{{ data_get($destination, 'name') }}</a>
     @empty
         <p>No destinations found.</p>
     @endforelse
-    <h1>Private Keys <a href="{{ route('private-key.new') }}"><button>New</button></a></h1>
+    <h1>Private Keys <a href="{{ route('private-key.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($private_keys as $private_key)
         <a href="{{ route('private-key.show', [$private_key->uuid]) }}">{{ data_get($private_key, 'name') }}</a>
     @empty

resources/views/livewire/check-update.blade.php

@@ -1,6 +1,5 @@
 <div>
-    <button wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:click='checkUpdate'>Check for
-        updates</button>
+    <x-inputs.button wire:click='checkUpdate' type="submit">Check for updates</x-inputs.button>
     @if ($updateAvailable)
         Update available
     @endif

resources/views/livewire/destination/new/standalone-docker.blade.php

@@ -1,15 +1,21 @@
 <div>
     <form class="flex flex-col" wire:submit.prevent='submit'>
-        <x-form-input id="name" label="Name" required />
-        <x-form-input id="network" label="Network" required />
-        <x-form-input id="server_id" label="Server ID" required />
+        <x-inputs.input id="name" label="Name" required />
+        <x-inputs.input id="network" label="Network" required />
+        <x-inputs.input id="server_id" label="Server ID" required />
         @foreach ($servers as $key)
-            <button @if ($server_id == $key->id) class="bg-green-500" @endif
-                wire:click.prevent="setServerId('{{ $key->id }}')">{{ $key->name }}</button>
+            @if ($server_id == $key->id)
+                <x-inputs.button class="bg-green-500" wire:click.prevent="setServerId('{{ $key->id }}')">
+                    {{ $key->name }}
+                </x-inputs.button>
+            @else
+                <x-inputs.button wire:click.prevent="setServerId('{{ $key->id }}')">{{ $key->name }}
+                </x-inputs.button>
+            @endif
         @endforeach
-        <button class="mt-4" type="submit">
+        <x-inputs.button class="mt-4" type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
 
 </div>

resources/views/livewire/force-upgrade.blade.php

@@ -1,6 +1,5 @@
 <div>
     @if (auth()->user()->teams->contains(0))
-        <button wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:click='upgrade'>Force
-            Upgrade</button>
+        <x-inputs.button wire:click='upgrade'>Force Upgrade</x-inputs.button>
     @endif
 </div>

resources/views/livewire/private-key/change.blade.php

@@ -1,14 +1,14 @@
 <div>
     <form class="flex flex-col gap-2 w-96" wire:submit.prevent='changePrivateKey'>
-        <x-form-input id="private_key_name" label="Name" required />
-        <x-form-input id="private_key_description" label="Longer Description" />
-        <x-form-input type="textarea" id="private_key_value" label="Private Key" required />
-        <button type="submit">
+        <x-inputs.input id="private_key_name" label="Name" required />
+        <x-inputs.input id="private_key_description" label="Longer Description" />
+        <x-inputs.input type="textarea" id="private_key_value" label="Private Key" required />
+        <x-inputs.button type="submit">
             Submit
-        </button>
-        <button class="bg-red-500" @confirm.window="$wire.delete('{{ $private_key_uuid }}')"
-            x-on:click="toggleConfirmModal('Are you sure you would like to delete this application?')">
+        </x-inputs.button>
+        <x-inputs.button class="bg-red-500" confirm='Are you sure you would like to delete this private key?'
+            confirmAction="delete('{{ $private_key_uuid }}')">
             Delete
-        </button>
+        </x-inputs.button>
     </form>
 </div>

resources/views/livewire/private-key/create.blade.php

@@ -1,10 +1,10 @@
 <div>
     <form class="flex flex-col gap-2 w-96" wire:submit.prevent='createPrivateKey'>
-        <x-form-input id="private_key_name" label="Name" required />
-        <x-form-input id="private_key_description" label="Longer Description" />
-        <x-form-input type="textarea" id="private_key_value" label="Private Key" required />
-        <button type="submit">
+        <x-inputs.input id="private_key_name" label="Name" required />
+        <x-inputs.input id="private_key_description" label="Longer Description" />
+        <x-inputs.input type="textarea" id="private_key_value" label="Private Key" required />
+        <x-inputs.button type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
 </div>

resources/views/livewire/project/application/deploy.blade.php

@@ -1,15 +1,16 @@
 <div>
-    <button class="bg-red-500" @confirm.window="$wire.delete()"
-        x-on:click="toggleConfirmModal('Are you sure you would like to delete this application?')">
-        Delete</button>
+
     @if ($application->status === 'running')
-        <button wire:click='start'>Restart</button>
-        <button wire:click='forceRebuild'>Force Rebuild</button>
+        <x-inputs.button wire:click='start'>Restart</x-inputs.button>
+        <x-inputs.button wire:click='forceRebuild'>Force Rebuild</x-inputs.button>
+        <x-inputs.button wire:click='stop'>Stop</x-inputs.button>
     @else
-        <button wire:click='start'>Start</button>
-        <button wire:click='forceRebuild'>Start (no cache)</button>
+        <x-inputs.button wire:click='start'>Start</x-inputs.button>
+        <x-inputs.button wire:click='forceRebuild'>Start (no cache)</x-inputs.button>
     @endif
-    <button wire:click='stop'>Stop</button>
+    <x-inputs.button class="bg-red-500" confirmAction="delete"
+        confirm='Are you sure you would like to delete this application?'>
+        Delete</x-inputs.button>
     <span wire:poll.5000ms='pollingStatus'>
         @if ($application->status === 'running')
             @if (data_get($application, 'fqdn'))

resources/views/livewire/project/application/general.blade.php

@@ -2,51 +2,51 @@
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex flex-col gap-2 xl:flex-row">
             <div class="flex flex-col w-96">
-                <x-form-input id="application.name" label="Name" required />
-                <x-form-input id="application.fqdn" label="FQDN" />
+                <x-inputs.input id="application.name" label="Name" required />
+                <x-inputs.input id="application.fqdn" label="FQDN" />
             </div>
             <div class="flex flex-col w-96">
-                <x-form-input id="application.install_command" label="Install Command" />
-                <x-form-input id="application.build_command" label="Build Command" />
-                <x-form-input id="application.start_command" label="Start Command" />
-                <x-form-input id="application.build_pack" label="Build Pack" />
+                <x-inputs.input id="application.install_command" label="Install Command" />
+                <x-inputs.input id="application.build_command" label="Build Command" />
+                <x-inputs.input id="application.start_command" label="Start Command" />
+                <x-inputs.input id="application.build_pack" label="Build Pack" />
                 @if ($application->settings->is_static)
-                    <x-form-input id="application.static_image" label="Static Image" required />
+                    <x-inputs.input id="application.static_image" label="Static Image" required />
                 @endif
             </div>
             <div class="flex flex-col w-96">
 
-                <x-form-input id="application.base_directory" label="Base Directory" />
+                <x-inputs.input id="application.base_directory" label="Base Directory" />
                 @if ($application->settings->is_static)
-                    <x-form-input id="application.publish_directory" label="Publish Directory" required />
+                    <x-inputs.input id="application.publish_directory" label="Publish Directory" required />
                 @else
-                    <x-form-input id="application.publish_directory" label="Publish Directory" />
+                    <x-inputs.input id="application.publish_directory" label="Publish Directory" />
                 @endif
 
             </div>
             <div class="flex flex-col w-96">
                 @if ($application->settings->is_static)
-                    <x-form-input id="application.ports_exposes" label="Ports Exposes" disabled />
+                    <x-inputs.input id="application.ports_exposes" label="Ports Exposes" disabled />
                 @else
-                    <x-form-input id="application.ports_exposes" label="Ports Exposes" required />
+                    <x-inputs.input id="application.ports_exposes" label="Ports Exposes" required />
                 @endif
 
-                <x-form-input id="application.ports_mappings" label="Ports Mappings" />
+                <x-inputs.input id="application.ports_mappings" label="Ports Mappings" />
             </div>
         </div>
-        <button class="flex mx-auto mt-4" type="submit">
+        <x-inputs.button class="flex mx-auto mt-4" type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
     <div class="flex flex-col pt-4 text-right w-52">
-        <x-form-input instantSave type="checkbox" id="is_static" label="Static website?" />
-        <x-form-input instantSave type="checkbox" id="is_auto_deploy" label="Auto Deploy?" />
-        <x-form-input instantSave type="checkbox" id="is_dual_cert" label="Dual Certs?" />
-        <x-form-input instantSave type="checkbox" id="is_previews" label="Previews?" />
-        <x-form-input instantSave type="checkbox" id="is_custom_ssl" label="Is Custom SSL?" />
-        <x-form-input instantSave type="checkbox" id="is_http2" label="Is Http2?" />
-        <x-form-input instantSave type="checkbox" id="is_git_submodules_allowed" label="Git Submodules Allowed?" />
-        <x-form-input instantSave type="checkbox" id="is_git_lfs_allowed" label="Git LFS Allowed?" />
-        <x-form-input instantSave type="checkbox" id="is_debug" label="Debug" />
+        <x-inputs.input instantSave type="checkbox" id="is_static" label="Static website?" />
+        <x-inputs.input instantSave type="checkbox" id="is_auto_deploy" label="Auto Deploy?" />
+        <x-inputs.input instantSave type="checkbox" id="is_dual_cert" label="Dual Certs?" />
+        <x-inputs.input instantSave type="checkbox" id="is_previews" label="Previews?" />
+        <x-inputs.input instantSave type="checkbox" id="is_custom_ssl" label="Is Custom SSL?" />
+        <x-inputs.input instantSave type="checkbox" id="is_http2" label="Is Http2?" />
+        <x-inputs.input instantSave type="checkbox" id="is_git_submodules_allowed" label="Git Submodules Allowed?" />
+        <x-inputs.input instantSave type="checkbox" id="is_git_lfs_allowed" label="Git LFS Allowed?" />
+        <x-inputs.input instantSave type="checkbox" id="is_debug" label="Debug" />
     </div>
 </div>

resources/views/livewire/project/application/source.blade.php

@@ -1,9 +1,9 @@
 <div>
-    <p>Source Name: {{ data_get($application,'source.name') }}</p>
-    <p>Is Public Source: {{ data_get($application,'source.is_public') }}</p>
+    <p>Source Name: {{ data_get($application, 'source.name') }}</p>
+    <p>Is Public Source: {{ data_get($application, 'source.is_public') }}</p>
     <div class="flex flex-col w-96">
-        <x-form-input id="application.git_repository" label="Git Repository" readonly />
-        <x-form-input id="application.git_branch" label="Git Branch" readonly />
-        <x-form-input id="application.git_commit_sha" label="Git Commit SHA" readonly />
+        <x-inputs.input id="application.git_repository" label="Git Repository" readonly />
+        <x-inputs.input id="application.git_branch" label="Git Branch" readonly />
+        <x-inputs.input id="application.git_commit_sha" label="Git Commit SHA" readonly />
     </div>
 </div>

resources/views/livewire/project/new/empty-project.blade.php

@@ -1 +1 @@
-<button wire:click='createEmptyProject'>Empty Project</button>
+<x-inputs.button wire:click='createEmptyProject'>Empty Project</x-inputs.button>

resources/views/livewire/project/new/public-git-repository.blade.php

@@ -3,8 +3,12 @@
         <h1>Choose a server</h1>
     @endif
     @forelse ($servers as $server)
-        <button @if ($chosenServer && $chosenServer['id'] === $server->id) class="bg-blue-500" @endif
-            wire:click="chooseServer({{ $server }})">{{ $server->name }}</button>
+        @if ($chosenServer && $chosenServer['id'] === $server->id)
+            <x-inputs.button class="bg-blue-500" wire:click="chooseServer({{ $server }})">{{ $server->name }}
+            </x-inputs.button>
+        @else
+            <x-inputs.button wire:click="chooseServer({{ $server }})">{{ $server->name }}</x-inputs.button>
+        @endif
     @empty
         No servers found.
         <p>Did you forget to add a destination on the server?</p>
@@ -15,12 +19,24 @@
             <h1>Choose a destination</h1>
             <div>
                 @foreach ($standalone_docker as $standalone)
-                    <button @if ($chosenDestination?->uuid == $standalone->uuid) class="bg-blue-500" @endif
-                        wire:click="setDestination('{{ $standalone->uuid }}','StandaloneDocker')">{{ $standalone->network }}</button>
+                    @if ($chosenDestination?->uuid == $standalone->uuid)
+                        <x-inputs.button class="bg-blue-500"
+                            wire:click="setDestination('{{ $standalone->uuid }}','StandaloneDocker')">
+                            {{ $standalone->network }}</x-inputs.button>
+                    @else
+                        <x-inputs.button wire:click="setDestination('{{ $standalone->uuid }}','StandaloneDocker')">
+                            {{ $standalone->network }}</x-inputs.button>
+                    @endif
                 @endforeach
                 @foreach ($swarm_docker as $standalone)
-                    <button @if ($chosenDestination?->uuid == $standalone->uuid) class="bg-blue-500" @endif
-                        wire:click="setDestination('{{ $standalone->uuid }}','SwarmDocker')">{{ $standalone->uuid }}</button>
+                    @if ($chosenDestination?->uuid == $standalone->uuid)
+                        <x-inputs.button class="bg-blue-500"
+                            wire:click="setDestination('{{ $standalone->uuid }}','SwarmDocker')">
+                            {{ $standalone->network }}</x-inputs.button>
+                    @else
+                        <x-inputs.button wire:click="setDestination('{{ $standalone->uuid }}','SwarmDocker')">
+                            {{ $standalone->uuid }}</x-inputs.button>
+                    @endif
                 @endforeach
             </div>
             <div>
@@ -40,16 +56,16 @@
     @isset($chosenDestination)
         <h1>Choose a repository</h1>
         <form class="flex flex-col gap-2 w-96" wire:submit.prevent='submit'>
-            <x-form-input class="w-96" id="public_repository_url" label="Repository URL" />
-            <x-form-input instantSave type="checkbox" id="is_static" label="Static Site?" />
+            <x-inputs.input class="w-96" id="public_repository_url" label="Repository URL" />
+            <x-inputs.input instantSave type="checkbox" id="is_static" label="Static Site?" />
             @if ($is_static)
-                <x-form-input id="publish_directory" label="Publish Directory" />
+                <x-inputs.input id="publish_directory" label="Publish Directory" />
             @else
-                <x-form-input type="number" id="port" label="Port" :disabled="$is_static" />
+                <x-inputs.input type="number" id="port" label="Port" :disabled="$is_static" />
             @endif
-            <button type="submit">
+            <x-inputs.button type="submit">
                 Submit
-            </button>
+            </x-inputs.button>
         </form>
     @endisset
 

resources/views/livewire/run-command.blade.php

@@ -1,16 +1,16 @@
 <div>
     <div>
         <label for="command">
-            <input autofocus id="command" wire:model.defer="command" type="text" wire:keydown.enter="runCommand"/>
+            <input autofocus id="command" wire:model.defer="command" type="text" wire:keydown.enter="runCommand" />
             <select wire:model.defer="server">
                 @foreach ($servers as $server)
                     <option value="{{ $server->uuid }}">{{ $server->name }}</option>
                 @endforeach
             </select>
         </label>
-        <button wire:click="runCommand">Run command</button>
-        <button wire:click="runSleepingBeauty">Run sleeping beauty</button>
-        <button wire:click="runDummyProjectBuild">Build DummyProject</button>
+        <x-inputs.button wire:click="runCommand">Run command</x-inputs.button>
+        <x-inputs.button wire:click="runSleepingBeauty">Run sleeping beauty</x-inputs.button>
+        <x-inputs.button wire:click="runDummyProjectBuild">Build DummyProject</x-inputs.button>
     </div>
 
     <div>
@@ -21,9 +21,6 @@
         @endif
     </div>
     @isset($activity?->id)
-        <pre
-            style="width: 100%;overflow-y: scroll;"
-            @if ($isKeepAliveOn) wire:poll.750ms="polling" @endif
-        >{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($activity) }}</pre>
+        <pre style="width: 100%;overflow-y: scroll;" @if ($isKeepAliveOn) wire:poll.750ms="polling" @endif>{{ \App\Actions\CoolifyTask\RunRemoteProcess::decodeOutput($activity) }}</pre>
     @endisset
 </div>

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

@@ -2,31 +2,27 @@
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex flex-col gap-2 xl:flex-row">
             <div class="flex flex-col w-96">
-                <x-form-input id="server.name" label="Name" required />
-                <x-form-input id="server.description" label="Description" />
+                <x-inputs.input id="server.name" label="Name" required />
+                <x-inputs.input id="server.description" label="Description" />
             </div>
             <div class="flex flex-col w-96">
                 @if ($server->id === 0)
-                    <x-form-input id="server.ip" label="IP Address" readonly />
-                    <x-form-input id="server.user" label="User" readonly />
-                    <x-form-input type="number" id="server.port" label="Port" readonly />
+                    <x-inputs.input id="server.ip" label="IP Address" readonly />
+                    <x-inputs.input id="server.user" label="User" readonly />
+                    <x-inputs.input type="number" id="server.port" label="Port" readonly />
                 @else
-                    <x-form-input id="server.ip" label="IP Address" required readonly />
-                    <x-form-input id="server.user" label="User" required />
-                    <x-form-input type="number" id="server.port" label="Port" required />
+                    <x-inputs.input id="server.ip" label="IP Address" required readonly />
+                    <x-inputs.input id="server.user" label="User" required />
+                    <x-inputs.input type="number" id="server.port" label="Port" required />
                 @endif
             </div>
         </div>
         <div>
-            <button class="w-16 mt-4" type="submit">
-                Submit
-            </button>
-            <button wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled"
-                wire:click.prevent='checkServer'>Check Server</button>
-            <button class="bg-red-500" @confirm.window="$wire.delete()"
-                x-on:click="toggleConfirmModal('Are you sure you would like to delete this application?')">
-                Delete</button>
-            {{-- <button wire:click.prevent='installDocker'>Install Docker</button> --}}
+            <x-inputs.button type="submit">Submit</x-inputs.button>
+            <x-inputs.button wire:click.prevent='checkServer'>Check Server</x-inputs.button>
+            <x-inputs.button class="bg-red-500" confirm="Are you sure you would like to delete this application?"
+                confirmAction="delete">Delete
+            </x-inputs.button>
         </div>
     </form>
     @isset($uptime)

resources/views/livewire/server/new/by-ip.blade.php

@@ -1,21 +1,26 @@
 <div>
     <form class="flex flex-col" wire:submit.prevent='submit'>
-        <x-form-input id="name" label="Name" required />
-        <x-form-input id="description" label="Description" />
-        <x-form-input id="ip" label="IP Address" required />
-        <x-form-input id="user" label="User" />
-        <x-form-input type="number" id="port" label="Port" />
-        <x-form-input id="private_key_id" label="Private Key" required hidden />
-        <button class="mt-4" type="submit">
+        <x-inputs.input id="name" label="Name" required />
+        <x-inputs.input id="description" label="Description" />
+        <x-inputs.input id="ip" label="IP Address" required />
+        <x-inputs.input id="user" label="User" />
+        <x-inputs.input type="number" id="port" label="Port" />
+        <x-inputs.input id="private_key_id" label="Private Key" required hidden />
+        <x-inputs.button class="mt-4" type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
     <div class="flex gap-4">
         <div>
             <h1>Select a private key</h1>
             @foreach ($private_keys as $key)
-                <button @if ($private_key_id == $key->id) class="bg-green-500" @endif
-                    wire:click.defer="setPrivateKey('{{ $key->id }}')">{{ $key->name }}</button>
+                @if ($private_key_id == $key->id)
+                    <x-inputs.button class="bg-blue-500" wire:click.defer="setPrivateKey('{{ $key->id }}')">
+                        {{ $key->name }}</x-inputs.button>
+                @else
+                    <x-inputs.button wire:click.defer="setPrivateKey('{{ $key->id }}')">{{ $key->name }}
+                    </x-inputs.button>
+                @endif
             @endforeach
         </div>
         <div>

resources/views/livewire/server/private-key.blade.php

@@ -1,6 +1,6 @@
 <div>
     @forelse ($private_keys as $private_key)
-        <button wire:click='setPrivateKey({{ $private_key->id }})'>{{ $private_key->name }}</button>
+        <x-inputs.button wire:click='setPrivateKey({{ $private_key->id }})'>{{ $private_key->name }}</x-inputs.button>
     @empty
         <p>No private keys found</p>
     @endforelse

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

@@ -2,22 +2,22 @@
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex flex-col gap-2 xl:flex-row">
             <div class="flex flex-col w-96">
-                <x-form-input id="settings.fqdn" label="FQDN" />
-                <x-form-input id="settings.wildcard_domain" label="Wildcard Domain" />
+                <x-inputs.input id="settings.fqdn" label="FQDN" />
+                <x-inputs.input id="settings.wildcard_domain" label="Wildcard Domain" />
             </div>
             <div class="flex flex-col w-96">
-                <x-form-input type="number" id="settings.public_port_min" label="Public Port Min" />
-                <x-form-input type="number" id="settings.public_port_max" label="Public Port Max" />
+                <x-inputs.input type="number" id="settings.public_port_min" label="Public Port Min" />
+                <x-inputs.input type="number" id="settings.public_port_max" label="Public Port Max" />
             </div>
         </div>
-        <button class="w-16 mt-4" type="submit">
+        <x-inputs.button class="w-16 mt-4" type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
     <div class="flex flex-col pt-4 text-right w-52">
-        <x-form-input instantSave type="checkbox" id="do_not_track" label="Do Not Track" />
-        <x-form-input instantSave type="checkbox" id="is_auto_update_enabled" label="Auto Update?" />
-        <x-form-input instantSave type="checkbox" id="is_registration_enabled" label="Registration Enabled?" />
-        <x-form-input instantSave type="checkbox" id="is_https_forced" label="Force https?" />
+        <x-inputs.input instantSave type="checkbox" id="do_not_track" label="Do Not Track" />
+        <x-inputs.input instantSave type="checkbox" id="is_auto_update_enabled" label="Auto Update?" />
+        <x-inputs.input instantSave type="checkbox" id="is_registration_enabled" label="Registration Enabled?" />
+        <x-inputs.input instantSave type="checkbox" id="is_https_forced" label="Force https?" />
     </div>
 </div>

resources/views/livewire/switch-team.blade.php

@@ -1,6 +1,6 @@
 <div>
     @foreach (auth()->user()->otherTeams() as $team)
-        <button wire:key="{{ $team->id }}" wire:click="switch_to('{{ $team->id }}')">Switch to:
-            {{ $team->name }}</button>
+        <x-inputs.button wire:key="{{ $team->id }}" wire:click="switch_to('{{ $team->id }}')">Switch to:
+            {{ $team->name }}</x-inputs.button>
     @endforeach
 </div>

resources/views/private-key/new.blade.php

@@ -1,4 +1,4 @@
 <x-layout>
     <h1>New Private Key</h1>
-    <livewire:private-key.new.key />
+    <livewire:private-key.create />
 </x-layout>

resources/views/project/new.blade.php

@@ -6,8 +6,9 @@
     @endif
     <div x-data="{ activeTab: 'choose' }">
         <div class="flex flex-col w-64 gap-2 mb-10">
-            <button @click.prevent="activeTab = 'public-repo'">Public Repository</button>
-            <button @click.prevent="activeTab = 'github-private-repo'">Private Repository (GitHub App)</button>
+            <x-inputs.button @click.prevent="activeTab = 'public-repo'">Public Repository</x-inputs.button>
+            <x-inputs.button @click.prevent="activeTab = 'github-private-repo'">Private Repository (GitHub App)
+            </x-inputs.button>
             @if ($type === 'project')
                 <livewire:project.new.empty-project />
             @endif

resources/views/project/resources.blade.php

@@ -1,5 +1,7 @@
 <x-layout>
-    <h1>Resources <a href="{{ route('project.resources.new', Route::current()->parameters()) }}"><button>New</button></a>
+    <h1>Resources <a href="{{ route('project.resources.new', Route::current()->parameters()) }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a>
     </h1>
     <div>
         @foreach ($environment->applications as $application)

resources/views/server/show.blade.php

@@ -1,11 +1,14 @@
 <x-layout>
     <h1>Server</h1>
     <livewire:server.form :server_id="$server->id" />
-    <h2>Private Key <a
-            href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}"><button>Change</button></a>
+    <h2>Private Key <a href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">
+            <x-inputs.button>Change</x-inputs.button>
+        </a>
     </h2>
     <p>{{ $server->privateKey->name }}</p>
-    <h2>Destinations <a href="{{ route('destination.new', ['server_id' => $server->id]) }}"><button>New</button></a></h2>
+    <h2>Destinations <a href="{{ route('destination.new', ['server_id' => $server->id]) }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h2>
     @if ($server->standaloneDockers)
         @foreach ($server->standaloneDockers as $docker)
             <p>Network: {{ data_get($docker, 'network') }}</p>