mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-21 05:11:10 -05:00
Add models, enums, and services for user roles, theme preferences, slug history, and ID generation
This commit is contained in:
pacnpal
120
resources/views/livewire/profile-component.blade.php
Normal file
120
resources/views/livewire/profile-component.blade.php
Normal file
@@ -0,0 +1,120 @@
|
||||
<div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
|
||||
<form wire:submit="save" class="space-y-6">
|
||||
@if (session()->has('message'))
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
|
||||
{{ session('message') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="shrink-0">
|
||||
<img class="h-16 w-16 object-cover rounded-full" src="{{ $profile->getAvatarUrl() }}" alt="Profile photo">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block">
|
||||
<span class="sr-only">Choose profile photo</span>
|
||||
<input type="file" wire:model="avatar" class="block w-full text-sm text-slate-500
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-full file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-violet-50 file:text-violet-700
|
||||
hover:file:bg-violet-100
|
||||
"/>
|
||||
</label>
|
||||
@error('avatar') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
|
||||
@if($profile->avatar)
|
||||
<button type="button" wire:click="removeAvatar" class="mt-2 text-sm text-red-600 hover:text-red-900">
|
||||
Remove Photo
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="display_name" class="block text-sm font-medium text-gray-700">Display Name</label>
|
||||
<div class="mt-1">
|
||||
<input type="text" wire:model="display_name" id="display_name"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="How should we display your name?">
|
||||
</div>
|
||||
@error('display_name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="pronouns" class="block text-sm font-medium text-gray-700">Pronouns</label>
|
||||
<div class="mt-1">
|
||||
<input type="text" wire:model="pronouns" id="pronouns"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="e.g. they/them">
|
||||
</div>
|
||||
@error('pronouns') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="bio" class="block text-sm font-medium text-gray-700">Bio</label>
|
||||
<div class="mt-1">
|
||||
<textarea wire:model="bio" id="bio" rows="3"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="Tell us about yourself"></textarea>
|
||||
</div>
|
||||
@error('bio') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-medium text-gray-900">Social Media</h3>
|
||||
|
||||
<div>
|
||||
<label for="twitter" class="block text-sm font-medium text-gray-700">Twitter URL</label>
|
||||
<div class="mt-1">
|
||||
<input type="url" wire:model="twitter" id="twitter"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="https://twitter.com/yourusername">
|
||||
</div>
|
||||
@error('twitter') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="instagram" class="block text-sm font-medium text-gray-700">Instagram URL</label>
|
||||
<div class="mt-1">
|
||||
<input type="url" wire:model="instagram" id="instagram"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="https://instagram.com/yourusername">
|
||||
</div>
|
||||
@error('instagram') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="youtube" class="block text-sm font-medium text-gray-700">YouTube URL</label>
|
||||
<div class="mt-1">
|
||||
<input type="url" wire:model="youtube" id="youtube"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="https://youtube.com/@yourchannel">
|
||||
</div>
|
||||
@error('youtube') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="discord" class="block text-sm font-medium text-gray-700">Discord Username</label>
|
||||
<div class="mt-1">
|
||||
<input type="text" wire:model="discord" id="discord"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="username#1234">
|
||||
</div>
|
||||
@error('discord') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<button type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||
Save Profile
|
||||
</button>
|
||||
|
||||
<div wire:loading wire:target="save" class="text-sm text-gray-500">
|
||||
Saving...
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user