feat!: updated contact links section

app/_components/Header.tsx

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

app/_components/Sidemenu.tsx

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

app/_components/SocialLinks.tsx

@@ -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;
 };

app/_data/contacts.ts

@@ -1,5 +1,5 @@
-import socials, { Socials } from "./socials";
 import Package from "@/../package.json";
+import socials, { Socials } from "./socials";
 
 const contacts: ContactLinks =
 {
@@ -8,21 +8,20 @@ const contacts: ContactLinks =
 		text: Package.author.email,
 		href: "mailto:" + Package.author.email
 	},
-	telephone:
-	{
-		text: "+7 996 929-19-69",
-		href: "tel:79969291969",
-		country: "Russia"
-	},
 	socials:
 	{
 		"LinkedIn": socials["LinkedIn"],
-		"Telegram":
+		"Facebook":
 		{
 			username: "@xfox111",
-			href: "https://t.me/xfox111"
+			href: "https://facebook.com/xfox111"
 		},
-		"Twitter": socials["Twitter"]
+		"WhatsApp":
+		{
+			username: "@xfox111",
+			href: "https://wa.me/79969291969",
+			network: "whatsapp"
+		}
 	}
 };
 

app/_data/socials.ts

@@ -27,4 +27,5 @@ export type SocialLink =
 	{
 		href: string;
 		username: string;
+		network?: string;
 	};

app/_page_sections/ContactSection.module.scss

@@ -26,6 +26,12 @@
 		{
 			align-items: flex-end;
 			text-align: right;
+
+			.links
+			{
+				justify-content: flex-end;
+				flex-wrap: wrap;
+			}
 		}
 
 		.textarea

app/_page_sections/ContactSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Button from "@/_components/Button";
+import SocialLinks from "@/_components/SocialLinks";
 import contacts from "@/_data/contacts";
 import FormStatusTracker from "@/_utils/FormStatusTracker";
 import React, { InputHTMLAttributes, useMemo, useState } from "react";
@@ -83,27 +84,17 @@ const ContactSection: React.FC = () =>
 				<div className={ `${cls.container} ${cls.contacts}` }>
 					<h3>Direct contacts</h3>
 
-					<p>
+					<SocialLinks socials={ socials } className={ cls.links } />
-						{ Object.entries(socials).map(([name, i]) =>
-							<span key={ name }>
-								<span aria-hidden>{ name + ": " }</span>
-								<a aria-label={ `${name}: ${i.username}` } href={ i.href } target="_blank">
-									{ i.username }
-								</a>
-								<br aria-hidden />
-							</span>
-						) }
 
 					{ phone &&
-							<span>
+						<p>
 							<span aria-hidden>Telephone: </span>
 							<a aria-label={ `Telephone: ${phone.text} (${phone.country})` } href={ phone.href }>
 								{ phone.text }
 							</a>
 							<span aria-hidden> ({ phone.country })</span>
-							</span>
-						}
 						</p>
+					}
 
 					<Button href={ email.href } target="_blank">
 						{ email.text }