bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-27 17:41: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"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Button } from '../ui/button';
import { Eye } from 'lucide-svelte';
export let images: { src: string; alt: string; style?: string }[] = []; 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}" class="absolute inset-0 h-full w-full rounded-xl object-cover opacity-0 transition-opacity duration-1000 ease-out {img.style}"
/> />
{/each} {/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)} {#each images as _, i (_.src)}
<button on:click={() => handleMarkerClick(i)} aria-label="select image"> <Button
<svg height="20" width="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> variant="outline"
<circle class={index === i ? 'opacity-80' : 'opacity-30'}
cx="8" size="icon"
cy="8" on:click={() => handleMarkerClick(i)}
r="8" >
class:current-marker={index === i} <Eye class="transition-fill ease-outmuted h-4 w-4 " />
class="transition-fill fill-gray-500 duration-500 ease-out" </Button>
/>
</svg>
</button>
{/each} {/each}
</div> </div>
</div> </div>