124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
|
|
import CallbackForm from "@/components/CallbackForm";
|
|
import { site, socials } from "@/data/site";
|
|
import { useMessages } from "@/i18n/locale-context";
|
|
|
|
function InstagramIcon() {
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<rect x="3.5" y="3.5" width="17" height="17" rx="5" stroke="currentColor" strokeWidth="1.7" />
|
|
<circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.7" />
|
|
<circle cx="17.4" cy="6.6" r="1" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function TelegramIcon() {
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<path
|
|
d="M20.5 4.5 3.8 11.2c-1.1.4-1.1 1.1-.2 1.4l4.3 1.3 1.7 5.2c.2.7.1.9.8.9.4 0 .6-.2.8-.4l2.4-2.3 4.5 3.3c.8.5 1.4.2 1.6-.8L21.7 5.7c.3-1.1-.4-1.6-1.2-1.2Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.4"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function LinkedinIcon() {
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<rect x="3.5" y="3.5" width="17" height="17" rx="2.5" stroke="currentColor" strokeWidth="1.7" />
|
|
<path d="M8 10.5V16.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
|
|
<circle cx="8" cy="8" r="0.9" fill="currentColor" />
|
|
<path
|
|
d="M12 16.5v-3.6c0-1.2.8-2 1.9-2s1.9.8 1.9 2v3.6"
|
|
stroke="currentColor"
|
|
strokeWidth="1.7"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function EmailIcon() {
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<rect x="3.5" y="5.5" width="17" height="13" rx="2" stroke="currentColor" strokeWidth="1.7" />
|
|
<path d="M4.5 7.5 12 13l7.5-5.5" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function PhoneIcon() {
|
|
return (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
|
|
<path
|
|
d="M7.2 3.8h2.6l1.2 3-1.6 1.1a12.5 12.5 0 0 0 5.7 5.7l1.1-1.6 3 1.2v2.6c0 .7-.6 1.4-1.3 1.5-2 .3-6.3-.2-10.1-4S5.4 6.9 5.7 4.9c.1-.7.8-1.1 1.5-1.1Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.6"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const icons: Record<string, () => ReactNode> = {
|
|
instagram: InstagramIcon,
|
|
telegram: TelegramIcon,
|
|
linkedin: LinkedinIcon,
|
|
email: EmailIcon,
|
|
};
|
|
|
|
export default function ContactBar() {
|
|
const t = useMessages();
|
|
const socialLabels: Record<string, string> = {
|
|
instagram: t.social.instagram,
|
|
telegram: t.social.telegram,
|
|
linkedin: t.social.linkedin,
|
|
email: t.social.email,
|
|
};
|
|
|
|
return (
|
|
<section className="contact-bar" id="contact" aria-label={t.contactBar.label}>
|
|
<div className="container contact-bar-frame">
|
|
<div className="contact-bar-inner">
|
|
<div className="contact-bar-phone">
|
|
<span className="contact-bar-kicker">{t.contactBar.label}</span>
|
|
<a href={`tel:${site.phone.replace(/-/g, "")}`} className="contact-bar-number">
|
|
<span dir="ltr">{site.phone}</span>
|
|
<PhoneIcon />
|
|
</a>
|
|
</div>
|
|
<div className="contact-socials">
|
|
{socials.map((item) => {
|
|
const Icon = icons[item.id];
|
|
return (
|
|
<a
|
|
key={item.id}
|
|
href={item.href}
|
|
className="contact-social"
|
|
target={item.href.startsWith("mailto:") ? undefined : "_blank"}
|
|
rel="noopener noreferrer"
|
|
aria-label={socialLabels[item.id] || item.label}
|
|
title={socialLabels[item.id] || item.label}
|
|
>
|
|
{Icon ? <Icon /> : item.labelEn}
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="contact-bar-subscribe">
|
|
<p className="contact-bar-subscribe-text">{t.contactBar.subscribe}</p>
|
|
<CallbackForm />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|