40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import md5 from 'md5';
|
|
|
|
export let name: string;
|
|
export let email: string;
|
|
export let description: string;
|
|
export let url: string | null = null;
|
|
export let fedi: string | null = null;
|
|
export let youtube: string | null = null;
|
|
const image = `http://www.gravatar.com/avatar/${md5(email)}`;
|
|
</script>
|
|
|
|
<div class="flex flex-row gap-4 items-center p-4">
|
|
<a href={url}><img class="w-16 h-16" src={image} alt="" /></a>
|
|
<div class="grow flex flex-col">
|
|
<p class="text-text font-title text-xl">{name}</p>
|
|
<p class="text-text/70 text-md break-words">{description}</p>
|
|
<div class="flex flex-row gap-2 text-sm">
|
|
{#if url}
|
|
<a
|
|
class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
|
|
href={url}>Website</a
|
|
>
|
|
{/if}
|
|
{#if fedi}
|
|
<a
|
|
class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
|
|
href={fedi}>Fediverse</a
|
|
>
|
|
{/if}
|
|
{#if youtube}
|
|
<a
|
|
class="last:after:content-none after:content-['|'] after:ml-2 after:text-stone-800"
|
|
href={youtube}>Youtube</a
|
|
>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|