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,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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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