48 lines
1.2 KiB
Plaintext
48 lines
1.2 KiB
Plaintext
component Image {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
src: string = ""
|
|
alt: string = ""
|
|
width: string = ""
|
|
height: string = ""
|
|
loading: string = "lazy"
|
|
rounded: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<figure
|
|
data-ui-component="Image"
|
|
class='relative m-0 overflow-hidden bg-[var(--wire-color-surface-soft)] {class}'
|
|
class:rounded-2xl='rounded'
|
|
>
|
|
{#if src}
|
|
<img
|
|
src='{src}'
|
|
alt='{alt}'
|
|
width='{width}'
|
|
height='{height}'
|
|
loading='{loading}'
|
|
decoding="async"
|
|
class="block h-auto w-full object-cover transition duration-300"
|
|
class:aspect-square='size === "square"'
|
|
class:aspect-video='size === "video"'
|
|
class:aspect-[4/3]='size === "landscape"'
|
|
class:aspect-[3/4]='size === "portrait"'
|
|
/>
|
|
{:else}
|
|
<div
|
|
class="flex min-h-48 w-full items-center justify-center text-[var(--wire-color-text-muted)]"
|
|
role="img"
|
|
aria-label='{alt || "Image placeholder"}'
|
|
>
|
|
<span class="icon-[lucide--image] size-8" aria-hidden="true"></span>
|
|
</div>
|
|
{/if}
|
|
|
|
<slot></slot>
|
|
</figure>
|
|
}
|
|
}
|