first commit
This commit is contained in:
@@ -0,0 +1,116 @@
|
||||
<x-app-layout>
|
||||
<section class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="flex items-start justify-between flex-col lg:flex-row gap-6">
|
||||
<div>
|
||||
<h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">Browse Exercises</h1>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">Explore the full FitAtlas library. Filter by body part, muscle, or equipment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<!-- Filters -->
|
||||
<aside class="lg:col-span-12">
|
||||
<form action="{{ route('exercises.index') }}" method="GET" class="space-y-4 lg:space-y-0 lg:flex lg:flex-wrap lg:items-end lg:gap-4 bg-white dark:bg-gray-800 rounded-2xl p-4 ring-1 ring-gray-200 dark:ring-gray-700">
|
||||
<div class="w-full lg:w-72">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
|
||||
<input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Search by name or instruction" class="mt-1 w-full rounded-xl border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
|
||||
</div>
|
||||
<div class="w-full lg:w-56">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Body Part</label>
|
||||
<select name="bodypart" class="mt-1 w-full rounded-xl border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
|
||||
<option value="">Any</option>
|
||||
@foreach($bodyParts as $bp)
|
||||
<option value="{{ $bp->slug }}" @selected(($filters['bodypart'] ?? '') === $bp->slug)>{{ $bp->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full lg:w-56">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Muscle</label>
|
||||
<select name="muscle" class="mt-1 w-full rounded-xl border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
|
||||
<option value="">Any</option>
|
||||
@foreach($muscles as $m)
|
||||
<option value="{{ $m->slug }}" @selected(($filters['muscle'] ?? '') === $m->slug)>{{ $m->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full lg:w-56">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Equipment</label>
|
||||
<select name="equipment" class="mt-1 w-full rounded-xl border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2">
|
||||
<option value="">Any</option>
|
||||
@foreach($equipments as $e)
|
||||
<option value="{{ $e->slug }}" @selected(($filters['equipment'] ?? '') === $e->slug)>{{ $e->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full lg:w-auto flex items-center justify-between lg:justify-end gap-2 lg:ml-auto">
|
||||
<a href="{{ route('exercises.index') }}" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Reset</a>
|
||||
<button type="submit" class="inline-flex items-center rounded-xl bg-gradient-to-r from-fuchsia-600 to-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow hover:from-fuchsia-500 hover:to-indigo-500">Apply Filters</button>
|
||||
</div>
|
||||
</form>
|
||||
</aside>
|
||||
|
||||
<!-- Results -->
|
||||
<div class="lg:col-span-12">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">Showing <span class="font-medium">{{ $exercises->total() }}</span> exercises</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-600 dark:text-gray-300">Per page</label>
|
||||
<select name="per_page" form="per-page-form" class="rounded-lg border-gray-300 dark:border-gray-700 bg-white/80 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:border-indigo-500 focus:ring-indigo-500 px-2 py-1">
|
||||
@foreach([12, 24, 36] as $n)
|
||||
<option value="{{ $n }}" @selected(($filters['per_page'] ?? 12) == $n)>{{ $n }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<form id="per-page-form" action="{{ route('exercises.index') }}" method="GET" class="hidden">
|
||||
@foreach(request()->except('per_page') as $k => $v)
|
||||
<input type="hidden" name="{{ $k }}" value="{{ $v }}">
|
||||
@endforeach
|
||||
<input type="hidden" name="per_page" value="{{ $filters['per_page'] ?? 12 }}">
|
||||
</form>
|
||||
<script>
|
||||
document.addEventListener('change', (e) => {
|
||||
if (e.target && e.target.name === 'per_page') {
|
||||
const form = document.getElementById('per-page-form');
|
||||
form.querySelector('input[name="per_page"]').value = e.target.value;
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($exercises->count() === 0)
|
||||
<div class="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700 p-8 text-center text-gray-600 dark:text-gray-300">No exercises found. Try adjusting your filters.</div>
|
||||
@else
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@php $badgePalette = ['bg-rose-100 text-rose-700','bg-amber-100 text-amber-700','bg-emerald-100 text-emerald-700','bg-sky-100 text-sky-700','bg-violet-100 text-violet-700']; @endphp
|
||||
@foreach($exercises as $exercise)
|
||||
<a href="{{ route('exercises.show', $exercise->slug) }}" class="group rounded-3xl overflow-hidden bg-white dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700 shadow-sm hover:shadow-xl transition">
|
||||
<div class="relative aspect-[16/9] overflow-hidden">
|
||||
<img src="{{ $exercise->gif_url ?: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1200&auto=format&fit=crop' }}" alt="{{ $exercise->name }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||||
<div class="absolute bottom-3 left-3 inline-flex items-center rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-gray-900 shadow">{{ $exercise->name }}</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="mt-1 flex flex-wrap gap-2">
|
||||
@foreach($exercise->targetMuscles->take(2) as $i => $m)
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $badgePalette[$i % count($badgePalette)] }}">{{ $m->name }}</span>
|
||||
@endforeach
|
||||
@if($exercise->bodyParts->count())
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200">{{ $exercise->bodyParts->first()->name }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-6">{{ $exercises->links() }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user