From 7923020458dea6222ceedca5cac7ea4ed41566de Mon Sep 17 00:00:00 2001
From: Eugene Fox <eugene@xfox111.net>
Date: Mon, 9 Sep 2024 13:34:13 +0000
Subject: [PATCH] feat!: updated contact links section

---
 app/_components/Header.tsx                    |  3 +-
 app/_components/Sidemenu.tsx                  |  5 +--
 app/_components/SocialLinks.tsx               | 13 ++++----
 app/_data/contacts.ts                         | 19 +++++------
 app/_data/socials.ts                          | 33 ++++++++++---------
 app/_page_sections/ContactSection.module.scss |  6 ++++
 app/_page_sections/ContactSection.tsx         | 31 +++++++----------
 7 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
index b01f98a..2257bbd 100644
--- a/app/_components/Header.tsx
+++ b/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
diff --git a/app/_components/Sidemenu.tsx b/app/_components/Sidemenu.tsx
index 60bfc1d..9d9c5ec 100644
--- a/app/_components/Sidemenu.tsx
+++ b/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>
diff --git a/app/_components/SocialLinks.tsx b/app/_components/SocialLinks.tsx
index 6058476..4497b73 100644
--- a/app/_components/SocialLinks.tsx
+++ b/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;
 };
diff --git a/app/_data/contacts.ts b/app/_data/contacts.ts
index 023d983..c994ee8 100644
--- a/app/_data/contacts.ts
+++ b/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"
+		}
 	}
 };
 
diff --git a/app/_data/socials.ts b/app/_data/socials.ts
index a2f1b25..e9e5b64 100644
--- a/app/_data/socials.ts
+++ b/app/_data/socials.ts
@@ -1,23 +1,23 @@
 import Package from "@/../package.json";
 
 const socials: Socials =
+{
+	"GitHub":
 	{
-		"GitHub":
-		{
-			href: Package.author.url,
-			username: "@xfox111"
-		},
-		"LinkedIn":
-		{
-			href: "https://www.linkedin.com/in/xfox/",
-			username: "@xfox"
-		},
-		"Twitter":
-		{
-			href: "https://twitter.com/xfox111",
-			username: "@xfox111"
-		},
-	};
+		href: Package.author.url,
+		username: "@xfox111"
+	},
+	"LinkedIn":
+	{
+		href: "https://www.linkedin.com/in/xfox/",
+		username: "@xfox"
+	},
+	"Twitter":
+	{
+		href: "https://twitter.com/xfox111",
+		username: "@xfox111"
+	},
+};
 
 export default socials;
 
@@ -27,4 +27,5 @@ export type SocialLink =
 	{
 		href: string;
 		username: string;
+		network?: string;
 	};
diff --git a/app/_page_sections/ContactSection.module.scss b/app/_page_sections/ContactSection.module.scss
index 9aaab7c..6e71237 100644
--- a/app/_page_sections/ContactSection.module.scss
+++ b/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
diff --git a/app/_page_sections/ContactSection.tsx b/app/_page_sections/ContactSection.tsx
index 65f6f27..d315635 100644
--- a/app/_page_sections/ContactSection.tsx
+++ b/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>
-						{ 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>
-						) }
+					<SocialLinks socials={ socials } className={ cls.links } />
 
-						{ phone &&
-							<span>
-								<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>
+					{ phone &&
+						<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>
+						</p>
+					}
 
 					<Button href={ email.href } target="_blank">
 						{ email.text }