bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-27 09:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: use different icon/button component

Browse source
This commit is contained in:
Bart van der Braak 2024-01-23 02:11:29 +01:00
parent 635ab5d374
commit b48242e2c1
1 changed files with 11 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/lib/components/site/image-fade-carousel.svelte
View file

@ -1,5 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Button } from '../ui/button';
import { Eye } from 'lucide-svelte';
export let images: { src: string; alt: string; style?: string }[] = [];
@ -30,19 +32,16 @@
class="absolute inset-0 h-full w-full rounded-xl object-cover opacity-0 transition-opacity duration-1000 ease-out {img.style}"
/>
{/each}
<div class="absolute bottom-[5%] left-[50%] grid translate-x-[-50%] grid-flow-col gap-2">
<div class="absolute bottom-[2.5%] left-[50%] grid translate-x-[-50%] grid-flow-col gap-2">
{#each images as _, i (_.src)}
<button on:click={() => handleMarkerClick(i)} aria-label="select image">
<svg height="20" width="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle
cx="8"
cy="8"
r="8"
class:current-marker={index === i}
class="transition-fill fill-gray-500 duration-500 ease-out"
/>
</svg>
</button>
<Button
variant="outline"
class={index === i ? 'opacity-80' : 'opacity-30'}
size="icon"
on:click={() => handleMarkerClick(i)}
>
<Eye class="transition-fill ease-outmuted h-4 w-4 " />
</Button>
{/each}
</div>
</div>