1
0
mirror of https://github.com/XFox111/my-website.git synced 2026-04-22 07:28:01 +03:00

feat!: updated contact links section

This commit is contained in:
2024-09-09 13:34:13 +00:00
parent 812bd34ee5
commit 7923020458
7 changed files with 55 additions and 55 deletions
+7 -6
View File
@@ -1,20 +1,20 @@
import socials from "@/_data/socials";
import { Socials } from "@/_data/socials";
import React from "react";
import { SocialIcon, networkFor, social_icons } from "react-social-icons";
import cls from "./SocialLinks.module.scss";
const SocialLinks: React.FC<SocialLinksProps> = ({ size = 50, ...props }) => (
const SocialLinks: React.FC<SocialLinksProps> = ({ size = 50, socials, ...props }) => (
<div aria-label="Social links" { ...props } className={ `${cls.socials} ${props.className}` }>
{ Object.entries(socials).map(([network, i]) =>
{ Object.entries(socials).map(([label, i]) =>
<SocialIcon
key={ network } title={ network }
key={ label } title={ label } network={ i.network }
url={ i.href } target="_blank"
className={ `${cls.link} ${cls[networkFor(i.href)] ?? ""}` }
className={ `${cls.link} ${cls[i.network ?? networkFor(i.href)] ?? ""}` }
style={ {
// @ts-expect-error Inline variables are not supported in TS definition, but it works.
"--network-color": social_icons.get(networkFor(i.href))?.color,
"--network-color": social_icons.get(i.network ?? networkFor(i.href))?.color,
width: size,
height: size
} } />
@@ -27,4 +27,5 @@ export default SocialLinks;
export type SocialLinksProps = React.HTMLAttributes<HTMLDivElement> & {
size?: number;
socials: Socials;
};