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:
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user