bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-26 17:11: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">
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>

15
src/routes/+page.svelte
View file

@ -7,10 +7,21 @@
import catImg from '$lib/assets/root-cat.jpg?enhanced';
import meImg from '$lib/assets/root-me.jpg?enhanced';
import { Cat, PersonStanding } from 'lucide-svelte';
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;