89 lines
4.7 KiB
TypeScript
89 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import type { ReactNode } from "react";
|
|
|
|
type Social = {
|
|
label: string;
|
|
href: string;
|
|
icon: ReactNode;
|
|
};
|
|
|
|
const socials: Social[] = [
|
|
{
|
|
label: "Twitter / X",
|
|
href: "#",
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
|
<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.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Discord",
|
|
href: "#",
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
|
<path d="M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1569 2.4189Zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "YouTube",
|
|
href: "#",
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
|
<path d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136C4.495 20.455 12 20.455 12 20.455s7.505 0 9.377-.505a3.02 3.02 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>
|
|
),
|
|
},
|
|
{
|
|
label: "Steam",
|
|
href: "#",
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
|
<path d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159 0 1.875-1.515 3.396-3.39 3.396-1.635 0-3.016-1.173-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.456-.397.957-1.497 1.41-2.454 1.012H7.54zm11.415-9.303c0-1.662-1.353-3.015-3.015-3.015-1.665 0-3.015 1.353-3.015 3.015 0 1.665 1.35 3.015 3.015 3.015 1.663 0 3.015-1.35 3.015-3.015zm-5.273-.005c0-1.252 1.013-2.266 2.265-2.266 1.249 0 2.266 1.014 2.266 2.266 0 1.251-1.017 2.265-2.266 2.265-1.253 0-2.265-1.014-2.265-2.265z" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export function SocialLinks() {
|
|
return (
|
|
<ul className="space-y-2 text-sm">
|
|
{socials.map((s) => (
|
|
<li key={s.label}>
|
|
<motion.a
|
|
href={s.href}
|
|
initial="rest"
|
|
whileHover="hover"
|
|
animate="rest"
|
|
className="group inline-flex items-center text-foreground-muted hover:text-foreground transition-colors"
|
|
>
|
|
<motion.span
|
|
variants={{
|
|
rest: { width: 0, opacity: 0, marginRight: 0 },
|
|
hover: { width: 16, opacity: 1, marginRight: 10 },
|
|
}}
|
|
transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
|
|
className="inline-flex items-center justify-center overflow-hidden text-accent"
|
|
>
|
|
<motion.span
|
|
variants={{
|
|
rest: { x: -8 },
|
|
hover: { x: 0 },
|
|
}}
|
|
transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
|
|
className="block w-4 h-4"
|
|
>
|
|
{s.icon}
|
|
</motion.span>
|
|
</motion.span>
|
|
<span>{s.label}</span>
|
|
</motion.a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|