104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import type { CSSProperties, ReactElement } from "react";
|
|
|
|
type SocialLink = {
|
|
href: string;
|
|
label: string;
|
|
color: string;
|
|
icon: (props: { className?: string }) => ReactElement;
|
|
};
|
|
|
|
const socialLinks: SocialLink[] = [
|
|
{
|
|
href: "https://x.com/home",
|
|
label: "X",
|
|
color: "#525252",
|
|
icon: (props) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...props}>
|
|
<path d="M5 5l14 14" />
|
|
<path d="M19 5L5 19" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "https://bsky.app/profile/neeldhara.bsky.social",
|
|
label: "Bluesky",
|
|
color: "#4f83b8",
|
|
icon: (props) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
|
|
<path d="M12 13c-2.9-5.2-6-7.2-8.1-6.4-1.6.7-1 4.4 2.3 7.1" />
|
|
<path d="M12 13c2.9-5.2 6-7.2 8.1-6.4 1.6.7 1 4.4-2.3 7.1" />
|
|
<path d="M12 13c-2.3 1.6-3.6 3.1-3.3 4.6.3 1.4 2.1 1.8 3.3.2" />
|
|
<path d="M12 13c2.3 1.6 3.6 3.1 3.3 4.6-.3 1.4-2.1 1.8-3.3.2" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "https://www.linkedin.com/in/neeldhara-misra-a54b6920/",
|
|
label: "LinkedIn",
|
|
color: "#496f9e",
|
|
icon: (props) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
|
|
<rect x="4.5" y="4.5" width="15" height="15" rx="2.5" />
|
|
<path d="M8 10.5v5.5" />
|
|
<path d="M11.5 16v-5.5" />
|
|
<path d="M11.5 13.1c0-1.7 1-2.7 2.3-2.7 1.5 0 2.2 1 2.2 2.7V16" />
|
|
<path d="M8 8h.01" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "https://mathstodon.xyz/@neeldhara",
|
|
label: "Mastodon",
|
|
color: "#7464a8",
|
|
icon: (props) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
|
|
<path d="M7 16.5c1.4.8 3.1 1.1 5.2 1 3.7-.1 5.8-1.7 6.1-4.8l.2-3.6c.2-3.1-1.4-4.7-4.5-4.7h-4c-3.1 0-4.7 1.6-4.5 4.7l.3 5.1c.2 3.4 2.2 5.2 5.9 5.3" />
|
|
<path d="M8.5 13V9.6c0-1.1.7-1.8 1.7-1.8.8 0 1.4.4 1.8 1.1.4-.7 1-1.1 1.8-1.1 1 0 1.7.7 1.7 1.8V13" />
|
|
<path d="M12 9.4V13" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "https://www.youtube.com/@neeldhara",
|
|
label: "YouTube",
|
|
color: "#b55252",
|
|
icon: (props) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
|
|
<path d="M4.8 8.5c.2-1.2 1.1-2.1 2.3-2.2 1.6-.2 3.2-.3 4.9-.3s3.3.1 4.9.3c1.2.1 2.1 1 2.3 2.2.2 1.1.3 2.2.3 3.5s-.1 2.4-.3 3.5c-.2 1.2-1.1 2.1-2.3 2.2-1.6.2-3.2.3-4.9.3s-3.3-.1-4.9-.3c-1.2-.1-2.1-1-2.3-2.2-.2-1.1-.3-2.2-.3-3.5s.1-2.4.3-3.5Z" />
|
|
<path d="M10.5 9.5l4 2.5-4 2.5v-5Z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
href: "https://www.instagram.com/neeldharamisra",
|
|
label: "Instagram",
|
|
color: "#9a6b8c",
|
|
icon: (props) => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...props}>
|
|
<rect x="5" y="5" width="14" height="14" rx="4" />
|
|
<circle cx="12" cy="12" r="3.2" />
|
|
<path d="M16.3 7.8h.01" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function SocialLinks({ className = "" }: { className?: string }) {
|
|
return (
|
|
<nav className={`social-links ${className}`} aria-label="Social links">
|
|
{socialLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
aria-label={link.label}
|
|
className="social-icon-link"
|
|
style={{ "--social-color": link.color } as CSSProperties}
|
|
target="_blank"
|
|
rel="me noopener noreferrer"
|
|
>
|
|
<link.icon className="h-5 w-5" />
|
|
</a>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|