Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import "./ContactCard.scss";
import Section from "./Section.svelte";
import CopyToClipboard from "$lib/components/CopyToClipboard";
import Link from "$lib/components/Link";
import classNames from "$lib/util/classNames";
import type {
Maybe,
ContentTypeLocation,
Contact,
Sys,
} from "$lib/services/server/contentful/schema.js";
export let address:
| Maybe<
Pick<
ContentTypeLocation,
"name" | "streetAddress1" | "streetAddress2" | "city" | "state" | "zip"
>
>
| undefined;
export let contacts:
| Maybe<
Pick<Contact, "entityName" | "phone" | "phoneExt" | "email"> & { sys: Pick<Sys, "id"> }
>[]
| undefined;
$: validContacts = contacts?.filter((contact): contact is Contact => !!contact);
const removePhoneFormatting = (phone: string): string => phone.replaceAll(/[^0-9]/g, "");
let className = "";
export { className as class };
$: classes = classNames("border radius-md padding-2 maxw-mobile-lg", className);
</script>
<div class={classes}>
<h2 class="margin-0 margin-bottom-1">Contact info</h2>
{#if address}
<strong class="display-block margin-bottom-1">Mailing address</strong>
{@const { name, streetAddress1, streetAddress2, city, state, zip } = address}
<Section>
<svelte:fragment slot="label">{name}</svelte:fragment>
<svelte:fragment slot="info">
{streetAddress1}{streetAddress2 ? `, ${streetAddress2}` : ""}
<br />
{city}, {state}
{zip}
</svelte:fragment>
</Section>
{/if}
{#if validContacts && validContacts.length > 0}
{#if address}
<strong class="display-block margin-bottom-1">Contact</strong>
{/if}
{#each validContacts as { sys, entityName, phone, phoneExt, email } (sys.id)}
<Section>
<svelte:fragment slot="label">{entityName}</svelte:fragment>
<svelte:fragment slot="info">
{#if phone}
<Link href="tel:+1{removePhoneFormatting(phone)}{phoneExt ? `;${phoneExt}` : ''}">
{phone}{phoneExt ? `, ext. ${phoneExt}` : ""}
</Link><br />
{/if}
{#if email}
<Link href="mailto:{email}">{email}</Link>
<CopyToClipboard contentToCopy={email} successMessage="Address copied to clipboard!" />
{/if}
</svelte:fragment>
</Section>
{/each}
{/if}
</div>
|