Add groups page. Update landing Add toastmagic

resources/views/components/profile/⚡edit.blade.php

@@ -0,0 +1,125 @@
+<?php
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Auth;
+
+new class extends Component
+{
+    public bool $isOpen = false;
+
+    public string $name = '';
+    public string $email = '';
+
+    public function openModal(): void
+    {
+        $user = Auth::user();
+
+        $this->name = (string) ($user?->name ?? '');
+        $this->email = (string) ($user?->email ?? '');
+
+        $this->isOpen = true;
+    }
+
+    public function closeModal(): void
+    {
+        $this->isOpen = false;
+    }
+
+    public function save(): void
+    {
+        $user = Auth::user();
+
+        $this->validate([
+            'name' => ['required', 'string', 'min:2', 'max:60'],
+        ]);
+
+        $user->forceFill([
+            'name' => $this->name,
+        ])->save();
+
+        $this->dispatch('toastMagic',
+            status: 'success',
+            title: 'Profile updated',
+            message: 'Your profile has been saved.'
+        );
+
+        $this->isOpen = false;
+    }
+};
+?>
+
+<div class="relative">
+    <button type="button" wire:click="openModal" class="btn-primary w-full text-base">
+        Edit profile
+    </button>
+
+    @if($isOpen)
+        <div class="fixed inset-0 z-[9999]" role="dialog" aria-modal="true" wire:keydown.escape.window="closeModal">
+            <button
+                type="button"
+                class="absolute inset-0 bg-black/50"
+                wire:click="closeModal"
+                aria-label="Close modal"
+            ></button>
+
+            <div class="absolute inset-0 bg-card">
+                <div class="mx-auto flex h-full w-full max-w-[420px] flex-col px-6 pt-6 pb-8">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <h3 class="text-lg font-semibold">Edit profile</h3>
+                            <p class="mt-1 text-xs text-muted-foreground">Update your display name.</p>
+                        </div>
+
+                        <button
+                            type="button"
+                            wire:click="closeModal"
+                            class="grid h-10 w-10 place-items-center rounded-xl bg-background ring-1 ring-border"
+                            aria-label="Close"
+                        >
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                            </svg>
+                        </button>
+                    </div>
+
+                    <div class="mt-6 flex flex-col gap-3">
+                        <label class="rounded-2xl bg-background p-4 ring-1 ring-border">
+                            <p class="text-xs text-muted-foreground">Name</p>
+                            <input
+                                type="text"
+                                wire:model.defer="name"
+                                autocomplete="name"
+                                class="mt-2 w-full rounded bg-transparent text-sm outline-none"
+                                placeholder="Your name"
+                            />
+                            @error('name')
+                            <p class="mt-2 text-xs text-red-500">{{ $message }}</p>
+                            @enderror
+                        </label>
+
+                        <label class="rounded-2xl bg-background p-4 ring-1 ring-border opacity-70">
+                            <p class="text-xs text-muted-foreground">Email</p>
+                            <input
+                                type="email"
+                                value="{{ auth()->user()->email }}"
+                                disabled
+                                class="mt-2 w-full rounded bg-transparent text-sm outline-none"
+                            />
+                        </label>
+                    </div>
+
+                    <div class="mt-auto pt-6 flex flex-col gap-3">
+                        <button type="button" wire:click="save" wire:loading.attr="disabled" class="btn-primary w-full text-base">
+                            <span wire:loading.remove wire:target="save">Save</span>
+                            <span wire:loading wire:target="save">Saving...</span>
+                        </button>
+
+                        <button type="button" wire:click="closeModal" class="btn-outline w-full text-base">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endif
+</div>