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

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
Show stats 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"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount, type ComponentType } from 'svelte';
import { Button } from '../ui/button'; 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; let index = 0;
/* global NodeJS */ /* global NodeJS */
@ -28,30 +28,25 @@
<enhanced:img <enhanced:img
src={img.src} src={img.src}
alt={img.alt} 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} {index ===
class="absolute inset-0 h-full w-full rounded-xl object-cover opacity-0 transition-opacity duration-1000 ease-out {img.style}" i && 'opacity-100'}"
/> />
{/each} {/each}
<div class="absolute bottom-[2.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 img, i}
<Button <Button
variant="outline" variant="outline"
class={index === i ? 'opacity-80' : 'opacity-30'} class={index === i ? '' : 'opacity-60'}
size="icon" size="icon"
aria-label={`Toggle image ${i + 1}`} aria-label={`Toggle image ${i + 1}`}
on:click={() => handleMarkerClick(i)} 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> </Button>
{/each} {/each}
</div> </div>
</div> </div>
<style>
.current-img {
opacity: 1;
}
.current-marker {
fill: white;
}
</style>

15
src/routes/+page.svelte
View file

@ -7,10 +7,21 @@
import catImg from '$lib/assets/root-cat.jpg?enhanced'; import catImg from '$lib/assets/root-cat.jpg?enhanced';
import meImg from '$lib/assets/root-me.jpg?enhanced'; import meImg from '$lib/assets/root-me.jpg?enhanced';
import { Cat, PersonStanding } from 'lucide-svelte';
const images = [ const images = [
{ src: meImg, alt: 'Portrait of Bart van der Braak', style: 'object-[50%_10%]' }, {
{ src: catImg, alt: 'Noire yawning cat and a bottle of whiskey with glass', style: '' } src: meImg,
alt: 'Portrait of Bart van der Braak',
style: 'object-[50%_10%]',
icon: PersonStanding
},
{
src: catImg,
alt: 'Noire yawning cat and a bottle of whiskey with glass',
style: '',
icon: Cat
}
]; ];
$: title = $page.data.title; $: title = $page.data.title;