bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-06-29 07:49:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add custom icons and type

Browse source
This commit is contained in:
Bart van der Braak 2024-01-23 15:55:17 +01:00
parent 8d07d3ec7b
commit 3f44e70fa0
2 changed files with 25 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount, type ComponentType } from 'svelte';
import { Button } from '../ui/button';
import { Eye } from 'lucide-svelte';
import type { Icon } from 'lucide-svelte';
export let images: { src: string; alt: string; style?: string }[] = [];
export let images: { src: string; alt: string; style?: string; icon: ComponentType<Icon> }[] = [];
let index = 0;
/* global NodeJS */
@ -28,30 +28,25 @@
<enhanced:img
src={img.src}
alt={img.alt}
class:current-img={index === i}
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} {index ===
i && 'opacity-100'}"
/>
{/each}
<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 img, i}
<Button
variant="outline"
class={index === i ? 'opacity-80' : 'opacity-30'}
class={index === i ? '' : 'opacity-60'}
size="icon"
aria-label={`Toggle image ${i + 1}`}
on:click={() => handleMarkerClick(i)}
>
<Eye class="transition-fill ease-outmuted h-4 w-4 " />
<svelte:component
this={img.icon}
{...$$props}
class="transition-fill ease-outmuted h-4 w-4"
/>
</Button>
{/each}
</div>
</div>
<style>
.current-img {
opacity: 1;
}
.current-marker {
fill: white;
}
</style>