feat(web): add social links to site footer

LinkedIn, Instagram and Facebook icon links in the footer brand column,
opening in a new tab with rel="noopener noreferrer" and per-icon
aria-labels.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-26 22:41:15 +03:00
parent 397aef8c35
commit 70b530c020

View File

@@ -1,13 +1,27 @@
import { type Locale, useTranslation } from "@/lib/i18n";
import { Separator } from "@sase/ui";
import { Link } from "@tanstack/react-router";
import { Globe } from "lucide-react";
import { Facebook, Globe, Instagram, Linkedin } from "lucide-react";
const LOCALES: { code: Locale; label: string }[] = [
{ code: "tr", label: "TR" },
{ code: "en", label: "EN" },
];
const SOCIALS: {
label: string;
href: string;
icon: React.ComponentType<{ className?: string }>;
}[] = [
{ label: "LinkedIn", href: "https://www.linkedin.com/company/%C5%9Fase/", icon: Linkedin },
{ label: "Instagram", href: "https://instagram.com/sase_tr", icon: Instagram },
{
label: "Facebook",
href: "https://www.facebook.com/profile.php?id=61589993436242",
icon: Facebook,
},
];
export function SiteFooter({ variant = "full" }: { variant?: "full" | "compact" }) {
const { t, locale, setLocale } = useTranslation();
@@ -69,6 +83,20 @@ export function SiteFooter({ variant = "full" }: { variant?: "full" | "compact"
>
info@sase.tr
</a>
<div className="mt-4 flex items-center gap-3">
{SOCIALS.map(({ label, href, icon: Icon }) => (
<a
key={label}
href={href}
target="_blank"
rel="noopener noreferrer"
aria-label={label}
className="text-muted-foreground transition hover:text-foreground"
>
<Icon className="size-5" />
</a>
))}
</div>
</div>
{/* Product */}