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