Update profile pages design
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
|
||||
<div class="grid md:grid-flow-col gap-4 xl:w-5/6 flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
<div class="flex flex-col gap-2">
|
||||
<livewire:user-comments :model="$user"/>
|
||||
</div>
|
||||
</div>
|
||||
<x-profile-layout>
|
||||
<div class="space-y-5">
|
||||
{{-- Header --}}
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-comment text-rose-500"></i>
|
||||
{{ __('nav.comments') }}
|
||||
</h2>
|
||||
|
||||
{{-- Content from Livewire --}}
|
||||
<livewire:user-comments :model="$user"/>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
@@ -1,9 +1,123 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
|
||||
<div class="grid md:grid-flow-col gap-4 w-5/6 flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
@include('profile.partials.info')
|
||||
<x-profile-layout>
|
||||
<div class="space-y-6">
|
||||
{{-- Welcome Banner --}}
|
||||
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-rose-600 via-rose-700 to-pink-700 p-6 sm:p-8 text-white shadow-xl shadow-rose-600/20">
|
||||
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-50"></div>
|
||||
<div class="relative z-10">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold">Welcome back, {{ $user->name }}!</h1>
|
||||
<p class="mt-2 text-rose-100 text-sm sm:text-base max-w-4xl">
|
||||
Here's an overview of your activity on hstream.moe. Dive back into your favorites or discover something new.
|
||||
</p>
|
||||
</div>
|
||||
{{-- Decorative circles --}}
|
||||
<div class="absolute -top-10 -right-10 h-40 w-40 rounded-full bg-white/5 blur-2xl"></div>
|
||||
<div class="absolute -bottom-10 -left-10 h-32 w-32 rounded-full bg-white/5 blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
{{-- Quick Links Grid --}}
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-3 sm:gap-4">
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="group rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-4 sm:p-5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-rose-100 dark:bg-rose-900/40 text-rose-600 dark:text-rose-400 group-hover:scale-110 transition-transform duration-200">
|
||||
<i class="fa-solid fa-heart text-lg"></i>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Liked Episodes</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($user->likes()) }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Episodes you've liked</p>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="group rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-4 sm:p-5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-sky-100 dark:bg-sky-900/40 text-sky-600 dark:text-sky-400 group-hover:scale-110 transition-transform duration-200">
|
||||
<i class="fa-solid fa-eye text-lg"></i>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Watch History</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($user->watched->count()) }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Episodes watched</p>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="group rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-4 sm:p-5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-100 dark:bg-violet-900/40 text-violet-600 dark:text-violet-400 group-hover:scale-110 transition-transform duration-200">
|
||||
<i class="fa-solid fa-rectangle-list text-lg"></i>
|
||||
</div>
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Your Playlists</span>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">{{ number_format($user->playlists->count()) }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Custom collections</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Recent Activity Section --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-5 sm:p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-5 flex items-center gap-2">
|
||||
<i class="fa-solid fa-clock-rotate-left text-rose-500"></i>
|
||||
Recent Activity
|
||||
</h3>
|
||||
|
||||
@php
|
||||
$recentWatched = $user->watched()->with('episode')->latest()->take(4)->get();
|
||||
$recentComments = $user->comments()->latest()->take(2)->get();
|
||||
@endphp
|
||||
|
||||
@if($recentWatched->isEmpty() && $recentComments->isEmpty())
|
||||
<div class="text-center py-10">
|
||||
<div class="inline-flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
|
||||
<i class="fa-solid fa-ghost text-2xl text-gray-400 dark:text-gray-500"></i>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm">No activity yet. Start watching something!</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-4">
|
||||
{{-- Recently Watched --}}
|
||||
@if($recentWatched->isNotEmpty())
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-500 mb-3">Recently Watched</p>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
@foreach($recentWatched as $watched)
|
||||
<a href="{{ route('hentai.index', ['title' => $watched->episode->slug]) }}"
|
||||
class="group relative overflow-hidden rounded-lg bg-gray-100 dark:bg-neutral-800 aspect-video block">
|
||||
<img src="{{ $watched->episode->gallery->first()->thumbnail_url ?? '/images/default-avatar.webp' }}"
|
||||
alt="{{ $watched->episode->title }}"
|
||||
class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
loading="lazy">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<p class="absolute bottom-2 left-2 right-2 text-xs text-white font-medium truncate">
|
||||
{{ $watched->episode->title }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Recent Comments --}}
|
||||
@if($recentComments->isNotEmpty())
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-500 mb-3">Recent Comments</p>
|
||||
<div class="space-y-2">
|
||||
@foreach($recentComments as $comment)
|
||||
<a href="{{ route('hentai.index', ['title' => $comment->commentable->slug ?? '#']) }}#comment-{{ $comment->id }}"
|
||||
class="block rounded-lg bg-gray-50/70 dark:bg-neutral-900/50 p-3 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors">
|
||||
<div class="text-sm text-gray-700 dark:text-gray-200 line-clamp-2">
|
||||
{!! $comment->presenter()->markdownBody() !!}
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-400/80 mt-1.5">
|
||||
{{ $comment->presenter()->relativeCreatedAt() }}
|
||||
</p>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
@@ -1,9 +1,14 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
@livewire('user-likes')
|
||||
<x-profile-layout>
|
||||
<div class="space-y-5">
|
||||
{{-- Header --}}
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-heart text-rose-500"></i>
|
||||
{{ __('nav.likes') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{{-- Content from Livewire --}}
|
||||
@livewire('user-likes')
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
@@ -1,55 +1,84 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div
|
||||
class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
|
||||
<div class="grid md:grid-flow-col gap-4 xl:w-5/6 flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
<div class="flex flex-col gap-2">
|
||||
<x-profile-layout>
|
||||
<div class="space-y-5">
|
||||
{{-- Header --}}
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-bell text-rose-500"></i>
|
||||
Notifications
|
||||
</h2>
|
||||
@if($notifications->isNotEmpty())
|
||||
<form method="POST" action="{{ route('profile.notifications.delete') }}" class="hidden sm:block">
|
||||
@csrf
|
||||
@method('delete')
|
||||
<button type="submit"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-red-200 dark:border-red-800/50 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors">
|
||||
<i class="fa-solid fa-trash-can text-[10px]"></i>
|
||||
Clear All
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@forelse($notifications as $notification)
|
||||
<div
|
||||
class="bg-white/40 dark:bg-neutral-950/40 backdrop-blur border border-gray-200 dark:border-neutral-700 rounded-xl shadow-sm p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-x-4 transition hover:shadow-md">
|
||||
@forelse($notifications as $notification)
|
||||
<div class="group relative rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 hover:shadow-md transition-all duration-200 overflow-hidden">
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col gap-2 w-full h-full mt-2">
|
||||
<div class="flex items-center justify-between flex-none h-2">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-sky-600 dark:text-rose-500">
|
||||
{{-- Unread indicator --}}
|
||||
@if(is_null($notification->read_at))
|
||||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-rose-500"></div>
|
||||
@endif
|
||||
|
||||
<div class="p-4 sm:p-5 {{ is_null($notification->read_at) ? 'pl-5 sm:pl-6' : '' }}">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
|
||||
|
||||
{{-- Content --}}
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1.5">
|
||||
<span class="inline-flex items-center gap-1 rounded-full bg-rose-100 dark:bg-rose-900/30 px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-rose-700 dark:text-rose-400">
|
||||
<i class="fa-solid fa-tag text-[9px]"></i>
|
||||
{{ $notification->data['type'] ?? 'Notification' }}
|
||||
</span>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">
|
||||
{{ $notification->created_at->diffForHumans(['parts' => 1]) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 leading-relaxed h-full">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
{{ $notification->data['message'] ?? '' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2 sm:gap-2 shrink-0">
|
||||
<a href="{{ $notification->data['url'] }}"
|
||||
class="text-center rounded-lg bg-sky-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-sky-700 transition">
|
||||
Open
|
||||
</a>
|
||||
{{-- Actions --}}
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
@if(isset($notification->data['url']))
|
||||
<a href="{{ $notification->data['url'] }}"
|
||||
class="inline-flex items-center gap-1 rounded-lg bg-rose-600 px-3.5 py-2 text-xs font-semibold text-white hover:bg-rose-700 shadow-sm shadow-rose-600/20 transition-all duration-150 hover:shadow-md hover:shadow-rose-600/25">
|
||||
Open
|
||||
<i class="fa-solid fa-arrow-right text-[10px]"></i>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('profile.notifications.delete') }}">
|
||||
@csrf
|
||||
@method('delete')
|
||||
<input type="hidden" value="{{ $notification->id }}" name="id">
|
||||
|
||||
<button type="submit"
|
||||
class="w-full rounded-lg bg-rose-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-rose-700 transition">
|
||||
Delete
|
||||
class="inline-flex items-center rounded-lg p-2 text-gray-400 hover:bg-red-50 dark:hover:bg-red-950/30 hover:text-red-500 dark:hover:text-red-400 transition-colors"
|
||||
title="Delete">
|
||||
<i class="fa-solid fa-xmark text-sm"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center py-16 text-gray-500 dark:text-gray-400">
|
||||
<p class="text-lg">No notifications</p>
|
||||
<p class="text-sm opacity-70">(╥﹏╥)</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-12 text-center">
|
||||
<div class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
|
||||
<i class="fa-solid fa-bell-slash text-3xl text-gray-400 dark:text-gray-500"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">No notifications</h3>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">You're all caught up! Nothing new here.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
@@ -1,19 +1,27 @@
|
||||
@auth
|
||||
<div
|
||||
class="overflow-hidden mt-5 relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
|
||||
<div class="flex flex-col p-2">
|
||||
<a class="block w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if(request()->routeIs('profile.settings')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"
|
||||
href="{{ route('profile.settings') }}"><i class="fa-solid fa-gear pr-4"></i>
|
||||
Settings</a>
|
||||
<div class="mt-5 overflow-hidden rounded-xl bg-white/40 shadow-lg ring-1 ring-black/5 dark:bg-neutral-950/40 backdrop-blur dark:ring-white/10">
|
||||
<div class="flex flex-col p-1.5">
|
||||
|
||||
<a href="{{ route('profile.settings') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.settings'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-gear w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.settings')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
Settings
|
||||
</a>
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<button type="submit"
|
||||
class="block w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-right-from-bracket pr-4"></i>
|
||||
Logout</button>
|
||||
class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-red-50/60 dark:hover:bg-red-950/40 hover:text-red-600 dark:hover:text-red-400 border-l-[3px] border-transparent transition-all duration-150">
|
||||
<i class="fa-solid fa-right-from-bracket w-5 text-center text-base text-gray-400 dark:text-gray-500"></i>
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
@endauth
|
||||
@@ -0,0 +1,86 @@
|
||||
<div class="md:hidden mt-5 -mx-1">
|
||||
<nav class="flex gap-1 overflow-x-auto pb-2 scrollbar-hide">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.show'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-user text-[10px]"></i>
|
||||
{{ __('nav.profile') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.notifications'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-bell text-[10px]"></i>
|
||||
Notifications
|
||||
@php $unreadCount = auth()->user()->unreadNotifications()->count(); @endphp
|
||||
@if($unreadCount > 0)
|
||||
<span class="inline-flex items-center justify-center h-4 min-w-[16px] rounded-full bg-rose-500 px-1 text-[9px] font-bold text-white">
|
||||
{{ $unreadCount > 99 ? '99+' : $unreadCount }}
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.likes'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-heart text-[10px]"></i>
|
||||
{{ __('nav.likes') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('user.watched'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-eye text-[10px]"></i>
|
||||
{{ __('nav.watched') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.comments'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-comment text-[10px]"></i>
|
||||
{{ __('nav.comments') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.playlists'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-rectangle-list text-[10px]"></i>
|
||||
{{ __('nav.playlists') }}
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.settings') }}"
|
||||
class="shrink-0 inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.settings'))
|
||||
bg-rose-600 text-white shadow-md shadow-rose-600/25
|
||||
@else
|
||||
bg-white/60 text-gray-600 dark:bg-neutral-900/60 dark:text-gray-400 hover:bg-white/90 dark:hover:bg-neutral-800/90
|
||||
@endif">
|
||||
<i class="fa-solid fa-gear text-[10px]"></i>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -1,15 +1,68 @@
|
||||
<div
|
||||
class="overflow-hidden relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl flex items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
|
||||
<img class="absolute -left-6 w-24 h-24 rounded-full shadow-lg" src="{{ $user->getAvatar() }}">
|
||||
<div class="flex flex-col py-5 pl-24">
|
||||
<strong class="text-slate-900 text-xl font-bold dark:text-slate-200">
|
||||
{{ $user->name }}
|
||||
@if ($user->hasRole(\App\Enums\UserRole::SUPPORTER))
|
||||
<a data-te-toggle="tooltip" title="Badge of appreciation for the horny people supporting us! :3"><i
|
||||
class="fa-solid fa-hand-holding-heart text-rose-600 animate-pulse"></i></a>
|
||||
@endif
|
||||
</strong>
|
||||
<span class="text-slate-500 text-sm font-medium dark:text-slate-400">Joined
|
||||
{{ $user->created_at->format('Y-m') }}</span>
|
||||
<div class="overflow-hidden rounded-xl bg-white/40 shadow-lg ring-1 ring-black/5 dark:bg-neutral-950/40 backdrop-blur dark:ring-white/10">
|
||||
<div class="relative">
|
||||
{{-- Profile Banner Gradient --}}
|
||||
<div class="h-20 bg-gradient-to-br from-rose-500 via-rose-600 to-pink-600 dark:from-rose-700 dark:via-rose-800 dark:to-pink-800"></div>
|
||||
|
||||
{{-- Avatar overlapping the banner --}}
|
||||
<div class="flex justify-center -mt-10">
|
||||
<div class="relative">
|
||||
<img class="h-20 w-20 rounded-full border-4 border-white dark:border-neutral-900 shadow-lg object-cover bg-white dark:bg-neutral-800"
|
||||
src="{{ auth()->user()->getAvatar() }}"
|
||||
alt="{{ auth()->user()->name }}">
|
||||
@if(auth()->user()->hasRole(\App\Enums\UserRole::SUPPORTER))
|
||||
<span class="absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-rose-600 text-white shadow-md ring-2 ring-white dark:ring-neutral-900"
|
||||
data-te-toggle="tooltip"
|
||||
title="Badge of appreciation for the horny people supporting us! :3">
|
||||
<i class="fa-solid fa-heart text-[11px]"></i>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- User Info --}}
|
||||
<div class="px-4 pb-4 pt-2 text-center">
|
||||
<h2 class="text-base font-bold text-gray-900 dark:text-gray-100 truncate">
|
||||
{{ auth()->user()->name }}
|
||||
</h2>
|
||||
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
Joined {{ auth()->user()->created_at->format('F Y') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- Quick Stats Row --}}
|
||||
<div class="grid grid-cols-4 border-t border-gray-200/60 dark:border-neutral-800/60">
|
||||
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
|
||||
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
|
||||
{{ number_format(auth()->user()->watched->count()) }}
|
||||
</div>
|
||||
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
|
||||
Views
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
|
||||
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
|
||||
{{ number_format(auth()->user()->commentCount()) }}
|
||||
</div>
|
||||
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
|
||||
Cmts
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
|
||||
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
|
||||
{{ number_format(auth()->user()->likes()) }}
|
||||
</div>
|
||||
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
|
||||
Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-3 text-center hover:bg-gray-50/50 dark:hover:bg-neutral-900/30 transition-colors cursor-default">
|
||||
<div class="text-sm font-bold text-gray-800 dark:text-gray-200">
|
||||
{{ number_format(auth()->user()->playlists->count()) }}
|
||||
</div>
|
||||
<div class="text-[10px] font-medium uppercase tracking-wider text-gray-600 dark:text-gray-500">
|
||||
Lists
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,37 +1,96 @@
|
||||
<div class="flex flex-col">
|
||||
<div>
|
||||
{{-- Profile Card --}}
|
||||
@include('profile.partials.profile')
|
||||
|
||||
<div
|
||||
class="overflow-hidden mt-5 relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
|
||||
<div class="flex flex-col p-2">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.show')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-user pr-4"></i> {{ __('nav.profile') }}</a>
|
||||
{{-- Desktop Navigation (hidden on mobile) --}}
|
||||
<div class="hidden md:block">
|
||||
<nav
|
||||
class="mt-5 overflow-hidden rounded-xl bg-white/40 shadow-lg ring-1 ring-black/5 dark:bg-neutral-950/40 backdrop-blur dark:ring-white/10">
|
||||
<div class="flex flex-col p-1.5">
|
||||
<a href="{{ route('profile.show') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.show'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-user w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.show')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.profile') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.notifications')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-bell pr-4"></i> Notifications</a>
|
||||
<a href="{{ route('profile.notifications') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.notifications'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-bell w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.notifications')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>Notifications</span>
|
||||
@php $unreadCount = auth()->user()->unreadNotifications()->count(); @endphp
|
||||
@if($unreadCount > 0)
|
||||
<span class="ml-auto inline-flex items-center justify-center h-5 min-w-[20px] rounded-full bg-rose-600 px-1.5 text-[10px] font-bold text-white">
|
||||
{{ $unreadCount > 99 ? '99+' : $unreadCount }}
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.likes')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-heart pr-4"></i> {{ __('nav.likes') }}</a>
|
||||
<a href="{{ route('profile.likes') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.likes'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-heart w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.likes')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.likes') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('user.watched')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-eye pr-4"></i>
|
||||
{{ __('nav.watched') }}</a>
|
||||
<a href="{{ route('user.watched') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('user.watched'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-eye w-5 text-center text-base
|
||||
@if(request()->routeIs('user.watched')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.watched') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.comments')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-comment pr-4"></i>
|
||||
{{ __('nav.comments') }}</a>
|
||||
<a href="{{ route('profile.comments') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.comments'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-comment w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.comments')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.comments') }}</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="block cursor-pointer w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if (request()->routeIs('profile.playlists')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"><i
|
||||
class="fa-solid fa-rectangle-list pr-4"></i>
|
||||
{{ __('nav.playlists') }}</a>
|
||||
</div>
|
||||
<a href="{{ route('profile.playlists') }}"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
|
||||
@if(request()->routeIs('profile.playlists'))
|
||||
bg-rose-600/10 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400 border-l-[3px] border-rose-600 dark:border-rose-400 ml-[-3px]
|
||||
@else
|
||||
text-gray-700 dark:text-gray-300 hover:bg-gray-100/60 dark:hover:bg-neutral-800/60 border-l-[3px] border-transparent
|
||||
@endif">
|
||||
<i class="fa-solid fa-rectangle-list w-5 text-center text-base
|
||||
@if(request()->routeIs('profile.playlists')) text-rose-600 dark:text-rose-400 @else text-gray-400 dark:text-gray-500 @endif"></i>
|
||||
<span>{{ __('nav.playlists') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{{-- Actions --}}
|
||||
@include('profile.partials.actions')
|
||||
</div>
|
||||
|
||||
@include('profile.partials.actions')
|
||||
</div>
|
||||
{{-- Mobile Navigation (horizontal scroll tabs, visible only on mobile) --}}
|
||||
@include('profile.partials.mobile-nav')
|
||||
</div>
|
||||
@@ -1,112 +1,151 @@
|
||||
<div>
|
||||
<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
|
||||
@if(count($playlists) > 0)
|
||||
@foreach($playlists as $playlist)
|
||||
@php
|
||||
$count = $playlist->episodes->count();
|
||||
@endphp
|
||||
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white/60 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-950/60 sm:shrink-0 sm:grow sm:basis-0">
|
||||
@if($count > 0)
|
||||
<a href="{{ route('profile.playlist.show', $playlist->id) }}">
|
||||
@else
|
||||
<a href="#!">
|
||||
@endif
|
||||
@if($count > 0)
|
||||
@if(count($playlists) > 0)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
@foreach($playlists as $playlist)
|
||||
@php
|
||||
$pe = \App\Models\PlaylistEpisode::where('playlist_id', $playlist->id)->orderBy('position', 'desc')->first();
|
||||
$count = $playlist->episodes->count();
|
||||
@endphp
|
||||
<img class="rounded-t-lg aspect-video" src="{{ $pe->episode->gallery->first()->thumbnail_url }}" alt="Hollywood Sign on The Hill" />
|
||||
@else
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-20" alt="..." />
|
||||
@endif
|
||||
</a>
|
||||
<div class="p-6" x-data="{ editing: false, name: '{{ $playlist->name }}', isPrivate: {{ $playlist->is_private ? 'true' : 'false' }} }">
|
||||
<!-- Edit mode -->
|
||||
<template x-if="editing">
|
||||
<div>
|
||||
<form method="POST" action="{{ route('profile.playlist.update', $playlist->id) }}" class="space-y-3">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-600 dark:text-neutral-400">Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
x-model="name"
|
||||
maxlength="30"
|
||||
required
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-600 dark:text-neutral-400">Visibility:</label>
|
||||
<select
|
||||
name="is_private"
|
||||
x-model="isPrivate"
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
>
|
||||
<option value="0">Public</option>
|
||||
<option value="1">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button type="submit" class="cursor-pointer rounded-lg bg-rose-600 px-4 py-2 text-xs font-semibold text-white transition hover:bg-rose-700">
|
||||
Save
|
||||
</button>
|
||||
<button type="button" @click="editing = false; name = '{{ $playlist->name }}'; isPrivate = {{ $playlist->is_private ? 'true' : 'false' }}" class="cursor-pointer rounded-lg border border-neutral-300 px-4 py-2 text-xs font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Display mode -->
|
||||
<template x-if="!editing">
|
||||
<div>
|
||||
<h5 class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
|
||||
{{ $playlist->name }}
|
||||
</h5>
|
||||
<p class="mb-2 text-sm leading-tight text-neutral-800 dark:text-neutral-50">
|
||||
{{ $count }} Episodes - {{ $playlist->is_private == 1 ? 'Private' : 'Public' }}
|
||||
@if($count > 0)
|
||||
<a href="{{ route('hentai.index', ['title' => $playlist->episodes->first()->episode->slug, 'playlist' => $playlist->id]) }}" class="cursor-pointer float-right text-white bg-rose-700 hover:bg-rose-800 focus:ring-4 focus:outline-none focus:ring-rose-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-rose-600 dark:hover:bg-rose-700 dark:focus:ring-rose-800">{{ __('playlist.play') }}</a>
|
||||
@endif
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('profile.playlist.delete', $playlist->id) }}" class="inline-flex items-center cursor-pointer text-xs text-red-600" data-confirm-delete="true">Delete</a>
|
||||
<button @click="editing = true" class="inline-flex items-center cursor-pointer text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">Edit</button>
|
||||
<div class="group rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200 flex flex-col">
|
||||
{{-- Thumbnail --}}
|
||||
@if($count > 0)
|
||||
<a href="{{ route('profile.playlist.show', $playlist->id) }}" class="block overflow-hidden">
|
||||
@php
|
||||
$pe = \App\Models\PlaylistEpisode::where('playlist_id', $playlist->id)->orderBy('position', 'desc')->first();
|
||||
@endphp
|
||||
<img class="w-full aspect-video object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
src="{{ $pe->episode->gallery->first()->thumbnail_url }}"
|
||||
alt="{{ $playlist->name }}"
|
||||
loading="lazy" />
|
||||
</a>
|
||||
@else
|
||||
<div class="w-full aspect-video bg-gray-200 dark:bg-neutral-800 flex items-center justify-center">
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp"
|
||||
class="w-full aspect-video object-cover opacity-30 dark:opacity-15"
|
||||
alt="Empty playlist" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Content --}}
|
||||
<div class="p-4 flex-1 flex flex-col"
|
||||
x-data="{ editing: false, name: '{{ $playlist->name }}', isPrivate: {{ $playlist->is_private ? 'true' : 'false' }} }">
|
||||
|
||||
{{-- Edit mode --}}
|
||||
<template x-if="editing">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<form method="POST" action="{{ route('profile.playlist.update', $playlist->id) }}" class="flex-1 flex flex-col">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
<div class="space-y-3 flex-1">
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-500 dark:text-neutral-400">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
x-model="name"
|
||||
maxlength="30"
|
||||
required
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-xs font-medium text-neutral-500 dark:text-neutral-400">Visibility</label>
|
||||
<select
|
||||
name="is_private"
|
||||
x-model="isPrivate"
|
||||
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white focus:border-rose-500 focus:ring-rose-500"
|
||||
>
|
||||
<option value="0">Public</option>
|
||||
<option value="1">Private</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
|
||||
<button type="submit" class="cursor-pointer rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-rose-700 flex-1">
|
||||
Save
|
||||
</button>
|
||||
<button type="button" @click="editing = false; name = '{{ $playlist->name }}'; isPrivate = {{ $playlist->is_private ? 'true' : 'false' }}" class="cursor-pointer rounded-lg border border-neutral-300 px-3 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800 flex-1">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- Display mode --}}
|
||||
<template x-if="!editing">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="flex-1">
|
||||
<h5 class="text-base font-semibold text-neutral-800 dark:text-neutral-50 truncate">
|
||||
{{ $playlist->name }}
|
||||
</h5>
|
||||
<div class="flex items-center gap-2 mt-1.5">
|
||||
<span class="inline-flex items-center gap-1 pl-2 pr-2 pt-1 pb-1 rounded-full bg-neutral-100 dark:bg-neutral-700 px-2 py-0.5 text-[11px] font-medium text-neutral-600 dark:text-neutral-300">
|
||||
<i class="fa-solid fa-film text-[9px]"></i>
|
||||
{{ $count }} {{ Str::plural('ep', $count) }}
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1 pl-2 pr-2 pt-1 pb-1 rounded-full text-[11px] font-medium
|
||||
{{ $playlist->is_private ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400' : 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' }}">
|
||||
<i class="fa-solid fa-{{ $playlist->is_private ? 'lock' : 'globe' }} text-[9px]"></i>
|
||||
{{ $playlist->is_private ? 'Private' : 'Public' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('profile.playlist.delete', $playlist->id) }}"
|
||||
class="inline-flex items-center gap-1 text-[11px] text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
|
||||
data-confirm-delete="true">
|
||||
<i class="fa-solid fa-trash-can text-[10px]"></i>
|
||||
Delete
|
||||
</a>
|
||||
<button @click="editing = true"
|
||||
class="inline-flex items-center gap-1 text-[11px] text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors">
|
||||
<i class="fa-solid fa-pen-to-square text-[10px]"></i>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
@if($count > 0)
|
||||
<a href="{{ route('hentai.index', ['title' => $playlist->episodes->first()->episode->slug, 'playlist' => $playlist->id]) }}"
|
||||
class="inline-flex items-center gap-1 rounded-lg bg-rose-600 px-3 py-1.5 text-[11px] font-semibold text-white hover:bg-rose-700 transition-colors shadow-sm shadow-rose-600/20">
|
||||
<i class="fa-solid fa-play text-[9px]"></i>
|
||||
Play
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
{{-- Add New Playlist Card --}}
|
||||
<button
|
||||
data-te-toggle="modal"
|
||||
data-te-target="#modalCreatePlaylist"
|
||||
class="group rounded-xl border-2 border-dashed border-neutral-300 dark:border-neutral-700 bg-white/20 dark:bg-neutral-950/20 backdrop-blur hover:border-rose-400 dark:hover:border-rose-600 hover:bg-rose-50/50 dark:hover:bg-rose-950/20 transition-all duration-200 flex flex-col items-center justify-center p-8 min-h-[200px]">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 group-hover:scale-110 transition-transform duration-200 mb-3">
|
||||
<i class="fa-solid fa-plus text-xl"></i>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-neutral-600 dark:text-neutral-300">Create Playlist</p>
|
||||
<p class="text-xs text-neutral-400 dark:text-neutral-500 mt-1">Organize your favorites</p>
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
<!-- Add Another Playlist -->
|
||||
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white/60 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-950/60 sm:shrink-0 sm:grow sm:basis-0">
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-40" alt="..." />
|
||||
<div class="p-6">
|
||||
<p class="text-black dark:text-white">
|
||||
Create another Playlist
|
||||
</p>
|
||||
<a data-te-toggle="modal" data-te-target="#modalCreatePlaylist" data-te-ripple-init data-te-ripple-color="light" class="inline-flex items-center cursor-pointer px-4 py-2 mt-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
||||
Create
|
||||
</a>
|
||||
@else
|
||||
{{-- Empty State --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-12 text-center">
|
||||
<div class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
|
||||
<i class="fa-solid fa-rectangle-list text-3xl text-gray-400 dark:text-gray-500"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">No playlists yet</h3>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400 mb-6">Create your first playlist to organize your favorite episodes.</p>
|
||||
<button
|
||||
data-te-toggle="modal"
|
||||
data-te-target="#modalCreatePlaylist"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-rose-700 transition-colors shadow-sm shadow-rose-600/20">
|
||||
<i class="fa-solid fa-plus text-xs"></i>
|
||||
Create your first playlist
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<!-- No Playlist Found -->
|
||||
<div class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
|
||||
<img src="/images/hentai/sukebe-elf-tanbouki/gallery-ep-1-0.webp" class="rounded-t-lg opacity-50 dark:opacity-20" alt="..." />
|
||||
<div class="p-6">
|
||||
<p class="text-black dark:text-white">
|
||||
No Playlist found!
|
||||
</p>
|
||||
<a data-te-toggle="modal" data-te-target="#modalCreatePlaylist" data-te-ripple-init data-te-ripple-color="light" class="inline-flex items-center cursor-pointer px-4 py-2 mt-2 bg-rose-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-rose-700 active:bg-rose-900 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
|
||||
Create
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -1,14 +1,24 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
@include('profile.partials.user-playlists')
|
||||
</div>
|
||||
</div>
|
||||
@include('modals.create-playlist')
|
||||
<x-profile-layout>
|
||||
<div class="space-y-5">
|
||||
{{-- Header --}}
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-rectangle-list text-rose-500"></i>
|
||||
{{ __('nav.playlists') }}
|
||||
</h2>
|
||||
<button
|
||||
data-te-toggle="modal"
|
||||
data-te-target="#modalCreatePlaylist"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white shadow-sm shadow-rose-600/20 hover:bg-rose-700 transition-colors">
|
||||
<i class="fa-solid fa-plus text-xs"></i>
|
||||
New Playlist
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Content --}}
|
||||
@include('profile.partials.user-playlists')
|
||||
|
||||
{{-- Modal --}}
|
||||
@include('modals.create-playlist')
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
@@ -1,30 +1,126 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 mb-14 flex flex-row">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
<x-profile-layout>
|
||||
<div class="space-y-5">
|
||||
{{-- Header --}}
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-gear text-rose-500"></i>
|
||||
Settings
|
||||
</h2>
|
||||
|
||||
{{-- Settings Sections --}}
|
||||
<div class="space-y-5">
|
||||
|
||||
{{-- Profile Information --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400">
|
||||
<i class="fa-solid fa-user-pen text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Profile Information</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Update your name, email and avatar</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-profile-information-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Passkeys --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400">
|
||||
<i class="fa-solid fa-key text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Passkeys</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Manage WebAuthn passkeys for passwordless login</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
<livewire:passkeys />
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Password --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
|
||||
<i class="fa-solid fa-lock text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Update Password</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Keep your account secure</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-password-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Search Blacklist --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400">
|
||||
<i class="fa-solid fa-shield text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Search Blacklist</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Hide content with specific tags from search results</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-blacklist-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Website Design --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-neutral-200/60 dark:border-neutral-800/60">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">
|
||||
<i class="fa-solid fa-object-group text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Website Design</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Customize your browsing experience</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.update-design-form')
|
||||
</div>
|
||||
<div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
|
||||
</div>
|
||||
|
||||
{{-- Danger Zone --}}
|
||||
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-red-200/60 dark:ring-red-800/30 overflow-hidden">
|
||||
<div class="p-5 sm:p-6 border-b border-red-200/60 dark:border-red-800/30">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">
|
||||
<i class="fa-solid fa-triangle-exclamation text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-red-700 dark:text-red-400">Danger Zone</h3>
|
||||
<p class="text-xs text-red-500 dark:text-red-400">Irreversible actions - proceed with caution</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 sm:p-6">
|
||||
@include('profile.partials.delete-user-form')
|
||||
</div>
|
||||
@include('profile.partials.delete-user-modal')
|
||||
</div>
|
||||
@vite(['resources/js/user-blacklist.js'])
|
||||
</div>
|
||||
|
||||
{{-- Delete Account Modal --}}
|
||||
@include('profile.partials.delete-user-modal')
|
||||
|
||||
@vite(['resources/js/user-blacklist.js'])
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
@@ -1,9 +1,12 @@
|
||||
<x-app-layout>
|
||||
@include('partials.background')
|
||||
<div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
@include('profile.partials.sidebar')
|
||||
@livewire('watched', ['user' => $user])
|
||||
</div>
|
||||
<x-profile-layout>
|
||||
<div class="space-y-5">
|
||||
{{-- Header --}}
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<i class="fa-solid fa-eye text-rose-500"></i>
|
||||
{{ __('nav.watched') }}
|
||||
</h2>
|
||||
|
||||
{{-- Content from Livewire --}}
|
||||
@livewire('watched', ['user' => $user])
|
||||
</div>
|
||||
</x-app-layout>
|
||||
</x-profile-layout>
|
||||
Reference in New Issue
Block a user