You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
901 B
35 lines
901 B
<script lang="ts"> |
|
interface Props { |
|
name: string; |
|
src?: string | null; |
|
size?: "sm" | "md" | "lg" | "xl"; |
|
} |
|
|
|
let { name, src = null, size = "md" }: Props = $props(); |
|
|
|
const initial = $derived(name ? name[0].toUpperCase() : "?"); |
|
|
|
const sizes = { |
|
sm: { box: "w-8 h-8", text: "text-body", radius: "rounded-[16px]" }, |
|
md: { box: "w-12 h-12", text: "text-h3", radius: "rounded-[24px]" }, |
|
lg: { box: "w-16 h-16", text: "text-h2", radius: "rounded-[32px]" }, |
|
xl: { box: "w-24 h-24", text: "text-h1", radius: "rounded-[48px]" }, |
|
}; |
|
</script> |
|
|
|
{#if src} |
|
<img |
|
{src} |
|
alt={name} |
|
class="{sizes[size].box} {sizes[size].radius} object-cover shrink-0" |
|
/> |
|
{:else} |
|
<div |
|
class="{sizes[size].box} {sizes[size] |
|
.radius} bg-primary flex items-center justify-center shrink-0" |
|
> |
|
<span class="font-heading {sizes[size].text} text-night leading-none"> |
|
{initial} |
|
</span> |
|
</div> |
|
{/if}
|
|
|