47 lines
1.1 KiB
Svelte
47 lines
1.1 KiB
Svelte
<script>
|
|
export let name;
|
|
export let side = 48;
|
|
const colors = [
|
|
"#00AA55",
|
|
"#009FD4",
|
|
"#B381B3",
|
|
"#939393",
|
|
"#E3BC00",
|
|
"#D47500",
|
|
"#DC2A2A",
|
|
"#3ede91",
|
|
"#377dd4",
|
|
"#0256b0",
|
|
"#053d82",
|
|
"#3d026e",
|
|
"#b378e3",
|
|
"#c4065c",
|
|
"#543208",
|
|
"#d97811",
|
|
"#0c6b40",
|
|
];
|
|
let initials = "";
|
|
if (name.split(" ").length > 1) {
|
|
initials =
|
|
name.split(" ")[0].charAt(0).toUpperCase() +
|
|
name.split(" ")[1].charAt(0).toUpperCase();
|
|
} else {
|
|
initials =
|
|
name.split(" ")[0].charAt(0).toUpperCase() +
|
|
name.split(" ")[0].charAt(1).toUpperCase();
|
|
}
|
|
|
|
let charIndex = name.charCodeAt(1) + name.length;
|
|
let colorIndex = charIndex % 19;
|
|
</script>
|
|
|
|
<div
|
|
class="avatar"
|
|
title={name}
|
|
style="background-color:{colors[
|
|
colorIndex
|
|
]}; height: {side}px;width: {side}px; font-size:{side / 2}px"
|
|
>
|
|
<div class="avatar__letters">{initials}</div>
|
|
</div>
|