Initial commit

resources/themes/atom/views/components/photos.blade.php

@@ -0,0 +1,34 @@
+@props(['photos'])
+
+<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5">
+ @forelse ($photos as $photo)
+ <a href="{{ $photo->url }}" data-fancybox="gallery" class="group cursor-pointer block">
+ <div class="relative rounded-lg overflow-hidden shadow-md border border-gray-600 hover:border-[#eeb425] transition-all duration-300">
+ <div class="aspect-[4/3] relative overflow-hidden">
+ <img class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-110" 
+ src="{{ $photo->url }}" 
+ alt="Photo by {{ $photo->user?->username ?? 'Unknown' }}">
+ 
+ <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-300"></div>
+ </div>
+ 
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/90 to-transparent">
+ <div class="flex items-center gap-2">
+ <div class="flex h-7 w-7 items-center justify-center overflow-hidden rounded-full bg-gray-700 border border-gray-500">
+ <img src="{{ setting('avatar_imager') }}{{ $photo->user?->look ?? '' }}&direction=2&headonly=1&head_direction=2&gesture=sml" 
+ alt="{{ $photo->user?->username ?? 'Unknown' }}"
+ class="h-full w-full object-cover">
+ </div>
+ <div class="flex-1 min-w-0">
+ <p class="text-white text-sm font-semibold truncate ">{{ $photo->user?->username ?? __('Unknown') }}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
+ @empty
+ <div class="col-span-full text-center py-8">
+ <p class="text-gray-500 dark:text-gray-400">No photos available</p>
+ </div>
+ @endforelse
+</div>