mihkelmk/portfolio_site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust types for Image.svelte

Browse source
This commit is contained in:
Mihkel Martin Kasterpalu 2025-02-06 01:36:54 +02:00
parent 72452acf2c
commit 4bced28e3e
1 changed files with 48 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/lib/components/Image.svelte
View file

@ -13,9 +13,9 @@
let {
image,
tags = [],
tags,
class: className
}: { image: EnhancedImage; tags: Tag[]; class: string } = $props();
}: { image: EnhancedImage | undefined; tags?: Tag[]; class?: string } = $props();
let badgeVariant: BadgeVariant = $derived($mode == 'dark' ? 'secondary' : 'default');
</script>
@ -36,52 +36,58 @@
</span>
{/snippet}
<div
class="projectCardImage grid justify-items-center overflow-hidden rounded-md bg-primary shadow-lg"
>
{#if typeof image.src === 'string'}
<img src={image.src} alt={image.alt} class={className} />
{:else}
<enhanced:img src={image.src} alt={image.alt} class={className} />
{/if}
{#if tags}
<div class="space-x-4 self-start p-4">
{#each tags as { name, description }}
<HoverCard.Root>
<HoverCard.Trigger>
<Badge
class="font-title text-base font-semibold leading-relaxed tracking-wide"
variant={badgeVariant}>{name}</Badge
>
</HoverCard.Trigger>
<HoverCard.Content>
{description}
</HoverCard.Content>
</HoverCard.Root>
{/each}
</div>
{/if}
{#if image}
<div
class="projectCardImage grid justify-items-center overflow-hidden rounded-md bg-primary shadow-lg"
>
{#if typeof image.src === 'string'}
<img src={image.src} alt={image.alt} class={className} />
{:else}
<enhanced:img src={image.src} alt={image.alt} class={className} />
{/if}
{#if tags}
<div class="space-x-4 self-start p-4">
{#each tags as { name, description }}
<HoverCard.Root>
<HoverCard.Trigger>
<Badge
class="font-title text-base font-semibold leading-relaxed tracking-wide"
variant={badgeVariant}>{name}</Badge
>
</HoverCard.Trigger>
<HoverCard.Content>
{description}
</HoverCard.Content>
</HoverCard.Root>
{/each}
</div>
{/if}
{#if image.credit}
<div class="w-full self-end bg-black/50 text-center shadow-lg backdrop-blur-md">
<p
class="flex items-center justify-center px-4 py-2 font-mono text-xs font-semibold text-secondary/80 dark:text-primary/80"
>
{#if image.credit.href}
<a class="w-full" href={image.credit.href}>
{#if image.credit}
<div class="w-full self-end bg-black/50 text-center shadow-lg backdrop-blur-md">
<p
class="flex items-center justify-center px-4 py-2 font-mono text-xs font-semibold text-secondary/80 dark:text-primary/80"
>
{#if image.credit.href}
<a class="w-full" href={image.credit.href}>
{@render creditText(
image.credit.author,
image.credit.type,
'w-4 inline align-[-0.65em]'
)}
</a>
{:else}
{@render creditText(
image.credit.author,
image.credit.type,
'w-4 inline align-[-0.65em]'
)}
</a>
{:else}
{@render creditText(image.credit.author, image.credit.type, 'w-4 inline align-[-0.65em]')}
{/if}
</p>
</div>
{/if}
</div>
{/if}
</p>
</div>
{/if}
</div>
{/if}
<style>
.projectCardImage > * {