rating-room/src/lib/Grid.svelte

29 lines
607 B
Svelte

<script>
import { urlFor } from './sanityClient';
import { currentProduct } from '$lib/stores';
import { toProduct } from '$helpers';
export let products;
const {container} = {
container: 'flex flex-wrap m-12 justify-start',
}
</script>
<div class={container}>
{#each products as product}
<button on:click={() => toProduct(product, currentProduct)} >
{#if product.image}
<img src={urlFor(product.image).width(150).url()} alt={product.name}/>
{/if}
</button>
{/each}
</div>
<style>
img:hover {
background-image: url('dither.gif');
background-repeat: repeat;
}
</style>