Update avatar to take initials prop and render text as uppercase
This commit is contained in:
parent
05281c83cb
commit
68ed6b6359
|
@ -12,15 +12,7 @@
|
||||||
export let size = "M"
|
export let size = "M"
|
||||||
export let url = ""
|
export let url = ""
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let name = "John Doe"
|
export let initials = "JD"
|
||||||
|
|
||||||
function getInitials(name) {
|
|
||||||
let parts = name.split(" ")
|
|
||||||
if (parts.length > 0) {
|
|
||||||
return parts.map(name => name[0]).join("")
|
|
||||||
}
|
|
||||||
return name
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if url}
|
{#if url}
|
||||||
|
@ -38,7 +30,7 @@
|
||||||
size
|
size
|
||||||
)}); font-size: calc(var({sizes.get(size)}) / 2)"
|
)}); font-size: calc(var({sizes.get(size)}) / 2)"
|
||||||
>
|
>
|
||||||
{getInitials(name)}
|
{initials || ""}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
@ -52,5 +44,6 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue