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.
30 lines
685 B
30 lines
685 B
<script lang="ts"> |
|
import Avatar from "./Avatar.svelte"; |
|
|
|
interface Props { |
|
name: string; |
|
role?: string; |
|
size?: "sm" | "md"; |
|
isHover?: boolean; |
|
} |
|
|
|
let { name, role, size = "md", isHover = false }: Props = $props(); |
|
</script> |
|
|
|
<div |
|
class="flex items-center gap-2 p-1 rounded-[32px] w-full transition-colors {isHover |
|
? 'bg-dark' |
|
: 'bg-night'}" |
|
> |
|
<Avatar {name} size={size === "sm" ? "sm" : "md"} /> |
|
{#if size !== "sm"} |
|
<div class="flex-1 flex flex-col min-w-0"> |
|
<span class="font-heading text-h3 text-white truncate">{name}</span> |
|
{#if role} |
|
<span class="font-body text-body-sm text-white truncate" |
|
>{role}</span |
|
> |
|
{/if} |
|
</div> |
|
{/if} |
|
</div>
|
|
|