plcom/src/components/friend-card.astro
2023-05-21 21:48:45 +02:00

38 lines
967 B
Text

---
interface Props {
name: string;
linkUri: string;
}
const { name, linkUri } = Astro.props;
function extractInitials(name: string) {
// Split the name into words
const words = name.split(" ");
// Iterate over the words and extract the initials
const initials = words.map((word) => word.charAt(0).toUpperCase()).join("");
return initials;
}
const initials = extractInitials(name);
const linkLabel = linkUri.replace(/^https?:\/\//, "");
---
<li class="py-2">
<a
href={linkUri}
target="_blank"
class="hover:bg-gray-500 transition-all duration-200 flex items-center rounded-lg p-2"
>
<span
class="rounded-full flex-shrink-0 mr-4 w-10 h-10 bg-sky-900 text-white flex items-center justify-center text-lg font-medium"
>{initials}</span
>
<div>
<p class="font-bold">{name}</p>
<p class="">{linkLabel}</p>
</div>
</a>
</li>