diff options
Diffstat (limited to 'src/components/contact.svelte')
| -rw-r--r-- | src/components/contact.svelte | 79 |
1 files changed, 50 insertions, 29 deletions
diff --git a/src/components/contact.svelte b/src/components/contact.svelte index c7b0be3..9f5bb98 100644 --- a/src/components/contact.svelte +++ b/src/components/contact.svelte @@ -1,45 +1,66 @@ +<script context="module" lang="ts"> + export type ContactModel = { + addressLines: Array<string>; + email?: string; + phone?: string; + phoneHours?: string; + }; +</script> + <script lang="ts"> - export let address1: string; - export let address2: string; - export let address3: string; - export let email: string; - export let phone: string; - export let phoneHours: string; + import LL from "$i18n/i18n-svelte"; + + export let model: ContactModel; + + let visible = true; + + $: if (!model.addressLines) { + visible = false; + } else { + visible = true; + } </script> <section class="contact relative z-1"> <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl"> <div class="mb-8 lg:mb-12"> - <h1 class="text-center">Contact Us</h1> + <h1 class="text-center">{$LL.contact.title()}</h1> </div> <div class="grid grid-cols-12 gap-8 lg:gap-12"> <div class="col-span-12 lg:col-span-6"> <dl class="details-list details-list--rows"> - <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> - <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Address</dt> - <dd class="leading-snug lg:text-right"> - {address1}<br />{address2}<br />{address3} - </dd> - </div> - - <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> - <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Email</dt> - <dd> - <a href="mailto:webmaster@example.com">{email}</a> - </dd> - </div> - - <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> - <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">Phone</dt> - <dd class="leading-snug lg:text-right"> - <p><a href="tel:+44 7656 6455">{phone}</a></p> - <p class="text-contrast-medium">{phoneHours}</p> - </dd> - </div> + {#if (model.addressLines?.length ?? 0) > 0} + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.addressTitle()}</dt> + <dd class="leading-snug lg:text-right"> + {#each model.addressLines as line} + {line}<br /> + {/each} + </dd> + </div> + {/if} + {#if model.email} + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.emailTitle()}</dt> + <dd> + <a href="mailto:webmaster@example.com">{model.email}</a> + </dd> + </div> + {/if} + {#if model.phone} + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.phoneTitle()}</dt> + <dd class="leading-snug lg:text-right"> + <p><a href="tel:+44 7656 6455">{model.phone}</a></p> + {#if model.phoneHours} + <p class="text-contrast-medium">{model.phoneHours}</p> + {/if} + </dd> + </div> + {/if} </dl> </div> - <div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" /> </div> </div> |