25 lines
1.1 KiB
Plaintext
25 lines
1.1 KiB
Plaintext
---
|
|
import { urlFor } from '../sanity/imageUrl';
|
|
|
|
interface Props {
|
|
images: any[];
|
|
}
|
|
|
|
const { images } = Astro.props;
|
|
---
|
|
|
|
{images && images.length > 0 ? (
|
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-[--spacing-md] md:gap-[--spacing-sm] mt-[--spacing-lg]">
|
|
{images.map((image) => (
|
|
<div class="relative overflow-hidden rounded-lg shadow-[0_4px_10px_rgba(0,0,0,0.2)] transition-all duration-300 aspect-[4/3] hover:-translate-y-1 hover:shadow-[0_8px_20px_rgba(0,0,0,0.3)] group">
|
|
<img src={urlFor(image)} alt="Theater photo" loading="lazy" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div class="text-center p-[--spacing-xl] bg-white/10 rounded-lg italic">
|
|
<p class="placeholder-de m-0 text-lg" data-lang="de">Fotos werden bald hinzugefügt. Besuchen Sie uns später wieder!</p>
|
|
<p class="placeholder-en m-0 text-lg" data-lang="en">Photos will be added soon. Check back later!</p>
|
|
</div>
|
|
)}
|