127 lines
3.6 KiB
TypeScript
127 lines
3.6 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
|
|
import { companyData } from "@/data/companyData";
|
|
import styles from "./ContactCtaSection.module.css";
|
|
import { contactCtaData, type ContactInfo } from "./ContactCtaData";
|
|
|
|
interface ContactCtaSectionProps {
|
|
heading?: string;
|
|
lead?: string;
|
|
buttonLabel?: string;
|
|
buttonHref?: string;
|
|
}
|
|
|
|
function resolveCompanyContact(
|
|
item: Extract<ContactInfo, { type: "company" }>,
|
|
) {
|
|
if (item.contactKey === "phone") {
|
|
return {
|
|
label: companyData.contact.phone.display,
|
|
href: `tel:${companyData.contact.phone.value}`,
|
|
};
|
|
}
|
|
|
|
if (item.contactKey === "email") {
|
|
const email = `${companyData.contact.email.user}@${companyData.contact.email.domain}`;
|
|
|
|
return {
|
|
label: email,
|
|
href: `mailto:${email}`,
|
|
};
|
|
}
|
|
|
|
if (item.contactKey === "openingHours") {
|
|
return {
|
|
label: companyData.contact.openingHours.display,
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
export default function ContactCtaSection({
|
|
heading,
|
|
lead,
|
|
buttonLabel,
|
|
buttonHref,
|
|
}: ContactCtaSectionProps = {}) {
|
|
const resolvedHeading = heading ?? contactCtaData.heading;
|
|
const resolvedLead = lead ?? contactCtaData.lead;
|
|
const resolvedButtonLabel = buttonLabel ?? contactCtaData.buttonLabel;
|
|
const resolvedButtonHref = buttonHref ?? contactCtaData.buttonHref;
|
|
const { contacts } = contactCtaData;
|
|
|
|
return (
|
|
<section className={styles.section} aria-labelledby="contact-cta-heading">
|
|
<div className={styles.inner}>
|
|
<div className={styles.card}>
|
|
<div className={styles.top}>
|
|
<div className={styles.text}>
|
|
<h2 id="contact-cta-heading" className={styles.heading}>
|
|
{resolvedHeading}
|
|
</h2>
|
|
<p className={styles.lead}>{resolvedLead}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Link href={resolvedButtonHref} className="btn btn--filled-inverse">
|
|
<span className="btn-icon animate" aria-hidden="true">
|
|
<ArrowRightIcon size={16} weight="bold" />
|
|
</span>
|
|
{resolvedButtonLabel}
|
|
</Link>
|
|
</div>
|
|
<hr className={styles.divider} aria-hidden="true" />
|
|
|
|
<div className={styles.contactRow}>
|
|
{contacts.map((item) => {
|
|
const icon = (
|
|
<item.icon size={20} weight="regular" aria-hidden="true" />
|
|
);
|
|
|
|
if (item.type === "company") {
|
|
const resolved = resolveCompanyContact(item);
|
|
|
|
if (!resolved) return null;
|
|
|
|
return (
|
|
<a
|
|
key={item.contactKey}
|
|
href={resolved.href}
|
|
className={styles.contactItem}
|
|
aria-label={resolved.label}
|
|
>
|
|
{icon}
|
|
{resolved.label}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
if (item.href) {
|
|
return (
|
|
<a
|
|
key={item.label}
|
|
href={item.href}
|
|
className={styles.contactItem}
|
|
aria-label={item.label}
|
|
>
|
|
{icon}
|
|
{item.label}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span key={item.label} className={styles.contactItem}>
|
|
{icon}
|
|
{item.label}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|