68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
import { type SocialLink } from "@/data/site-config";
|
|
|
|
interface SocialIconsProps {
|
|
links: readonly SocialLink[] | SocialLink[];
|
|
className?: string;
|
|
iconClassName?: string;
|
|
}
|
|
|
|
/**
|
|
* Reusable social icon list.
|
|
* Used in: Footer, ContactFormSection.
|
|
*/
|
|
export function SocialIcons({
|
|
links,
|
|
className = "",
|
|
iconClassName = "",
|
|
}: SocialIconsProps) {
|
|
return (
|
|
<div className={`flex items-center gap-4 ${className}`} role="list">
|
|
{links.map((link) => (
|
|
<a
|
|
key={link.platform}
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
role="listitem"
|
|
aria-label={link.platform}
|
|
className={`flex h-10 w-10 items-center justify-center rounded-full border border-aiero-card-border text-aiero-text-muted transition-all duration-300 hover:border-aiero-teal hover:text-aiero-teal ${iconClassName}`}
|
|
>
|
|
<SocialSvg icon={link.icon} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Inline SVG icons for each social platform */
|
|
function SocialSvg({ icon }: { icon: SocialLink["icon"] }) {
|
|
const size = "h-4 w-4";
|
|
|
|
switch (icon) {
|
|
case "facebook":
|
|
return (
|
|
<svg className={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 0 1 1-1h3v-4h-3a5 5 0 0 0-5 5v2.01h-2l-.396 3.98h2.396v8.01Z" />
|
|
</svg>
|
|
);
|
|
case "x-twitter":
|
|
return (
|
|
<svg className={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z" />
|
|
</svg>
|
|
);
|
|
case "linkedin":
|
|
return (
|
|
<svg className={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z" />
|
|
</svg>
|
|
);
|
|
case "youtube":
|
|
return (
|
|
<svg className={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z" />
|
|
</svg>
|
|
);
|
|
}
|
|
}
|