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
+2 -1
View File
@@ -1,5 +1,6 @@
import TitleLogo from "@/_data/TitleLogo";
import links from "@/_data/links";
import socials from "@/_data/socials";
import React from "react";
import Button from "./Button";
import cls from "./Header.module.scss";
@@ -13,7 +14,7 @@ const Header: React.FC = () => (
<TitleLogo />
<NavigationLinks className={ cls.navigation } />
<SocialLinks className={ cls.socials } size={ 40 } />
<SocialLinks className={ cls.socials } size={ 40 } socials={ socials } />
<Button className={ cls.resume } as="next" href={ links.resume }>
Download resume
+3 -2
View File
@@ -1,12 +1,13 @@
"use client";
import links from "@/_data/links";
import socials from "@/_data/socials";
import { Dismiss24Regular, Navigation24Regular } from "@fluentui/react-icons";
import React, { useCallback, useEffect, useRef, useState } from "react";
import Button, { ButtonProps } from "./Button";
import NavigationLinks from "./NavigationLinks";
import cls from "./Sidemenu.module.scss";
import SocialLinks from "./SocialLinks";
import links from "@/_data/links";
const Sidemenu: React.FC<SidemenuProps> = ({ button, ...panelProps }) =>
{
@@ -70,7 +71,7 @@ const Sidemenu: React.FC<SidemenuProps> = ({ button, ...panelProps }) =>
</header>
<NavigationLinks className={ cls.navigation } links={ { className: cls.link } } />
<SocialLinks />
<SocialLinks socials={ socials } />
<Button className={ cls.resume } as="next" href={ links.resume }>Download resume</Button>
</div>
+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;
};