46 lines
902 B
Svelte
46 lines
902 B
Svelte
<script lang="ts">
|
|
import type { ContactView } from "$lib/api/types";
|
|
import Avatar from "$lib/components/ui/Avatar.svelte";
|
|
|
|
interface Props {
|
|
contact: ContactView;
|
|
}
|
|
|
|
let { contact }: Props = $props();
|
|
|
|
const name = $derived(
|
|
[contact.first_name, contact.last_name].filter(Boolean).join(" ") ||
|
|
"Contact"
|
|
);
|
|
</script>
|
|
|
|
<div class="Contact">
|
|
<Avatar {name} colorKey={contact.user_id ?? 0} size={2.5} />
|
|
<div class="info">
|
|
<div class="name">{name}</div>
|
|
{#if contact.phone_number}
|
|
<div class="phone">{contact.phone_number}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.Contact {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
|
|
min-width: 12rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.name {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.phone {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
</style>
|