74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useRef } from "react";
|
|
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
|
|
import styles from "./ContactCtaSection.module.css";
|
|
import { contactCtaData, type ContactInfo } from "./ContactCtaData";
|
|
|
|
function ObfuscatedLink({ item }: { item: ContactInfo }) {
|
|
const ref = useRef<HTMLAnchorElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
|
|
if (item.obfuscated?.tel) {
|
|
ref.current.href = `tel:${item.obfuscated.tel}`;
|
|
} else if (item.obfuscated?.user && item.obfuscated?.domain) {
|
|
ref.current.href = `mailto:${item.obfuscated.user}@${item.obfuscated.domain}`;
|
|
}
|
|
}, [item.obfuscated]);
|
|
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<a ref={ref} href="#" className={styles.contactItem}>
|
|
<Icon size={20} weight="regular" aria-hidden="true" />
|
|
{item.label}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
export default function ContactCtaSection() {
|
|
const { heading, lead, buttonLabel, buttonHref, 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}>
|
|
{heading}
|
|
</h2>
|
|
<p className={styles.lead}>{lead}</p>
|
|
</div>
|
|
|
|
<Link href={buttonHref} className="btn btn--filled-inverse">
|
|
<span className="btn-icon animate" aria-hidden="true">
|
|
<ArrowRightIcon size={16} weight="bold" />
|
|
</span>
|
|
{buttonLabel}
|
|
</Link>
|
|
</div>
|
|
|
|
<hr className={styles.divider} aria-hidden="true" />
|
|
|
|
<div className={styles.contactRow}>
|
|
{contacts.map((item: ContactInfo) =>
|
|
item.obfuscated ? (
|
|
<ObfuscatedLink key={item.label} item={item} />
|
|
) : (
|
|
<span key={item.label} className={styles.contactItem}>
|
|
<item.icon size={20} weight="regular" aria-hidden="true" />
|
|
{item.label}
|
|
</span>
|
|
),
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|