thrillwiki_laravel/resources/views/livewire/profile-component.blade.php

<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>