84 lines
No EOL
2.7 KiB
TypeScript
84 lines
No EOL
2.7 KiB
TypeScript
import React from 'react'
|
|
|
|
type ContactLink = {
|
|
label: string
|
|
sublabel?: string
|
|
url: string
|
|
icon?: string
|
|
newTab?: boolean
|
|
}
|
|
|
|
type ContactBlockProps = {
|
|
heading?: string
|
|
subtext?: string
|
|
email?: string
|
|
links?: ContactLink[]
|
|
}
|
|
|
|
export function ContactBlock({
|
|
heading,
|
|
subtext,
|
|
email,
|
|
links,
|
|
}: ContactBlockProps) {
|
|
return (
|
|
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
|
|
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
|
|
<div>
|
|
{heading && (
|
|
<h2 className="text-xl font-medium text-foreground mb-3">{heading}</h2>
|
|
)}
|
|
{subtext && (
|
|
<p className="text-sm text-foreground/50 leading-relaxed">{subtext}</p>
|
|
)}
|
|
</div>
|
|
{email && (
|
|
|
|
href={`mailto:${email}`}
|
|
className="self-start flex items-center gap-2 text-sm font-medium text-foreground/70 bg-background/50 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
<i className="ti ti-mail" style={{ fontSize: 14 }} aria-hidden="true" />
|
|
Get in touch
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{Array.isArray(links) && links.map((link, i) => (
|
|
|
|
key={i}
|
|
href={link.url}
|
|
target={link.newTab ? '_blank' : '_self'}
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-3 bg-muted/50 border border-foreground/8 rounded-xl px-5 py-4 hover:bg-muted/70 transition-colors group"
|
|
>
|
|
{link.icon && (
|
|
<i
|
|
className={`ti ${link.icon} text-foreground/40 group-hover:text-foreground/60 transition-colors`}
|
|
style={{ fontSize: 18 }}
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-foreground/70 group-hover:text-foreground/90 transition-colors">
|
|
{link.label}
|
|
</span>
|
|
{link.sublabel && (
|
|
<span className="text-xs text-foreground/30">{link.sublabel}</span>
|
|
)}
|
|
</div>
|
|
<i
|
|
className="ti ti-arrow-right text-foreground/20 group-hover:text-foreground/40 transition-colors ml-auto"
|
|
style={{ fontSize: 14 }}
|
|
aria-hidden="true"
|
|
/>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
)
|
|
} |