Gallery

Usage

import {Gallery} from '@/ui'

import dogs from '@/data/dogs.json'

/* 
{
	"name": "akita",
	"src": "/img/dogs/akita.jpg"
},
*/
                
<Gallery
	data={dogs}
	className='mb-12'
	caption={false} // true | false
	aspect='square' // 'aspect-[4/3]' | 'square' | 'portrait'
/>

Output

No Caption

Portrait

Square

Props

data: {
	name: string
	src: string
}
className?: string | undefined
aspect?: string | undefined
caption?: boolean | undefined

CSS

.gallery {
	@apply grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-6;

	figure.portrait {
		@apply aspect-[3/4];
	}
	
	figure.square {
		@apply aspect-square;
	}

	img {
		@apply cursor-zoom-in w-full h-full object-cover;

		&:hover {
			@apply opacity-75;
		}

		&:focus-visible {
			@apply opacity-75 outline-accent outline-8;
		}
	}
}