UADS-18 feat: Updated Socials component to take props for colours

UoaWDCC · Jun 25, 2024 · 5812efd · 5812efd
1 parent f2cd7b2
commit 5812efd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
@@ -13,7 +13,7 @@ export default function Footer() {
 					<p className="font-raleway text-light-pink font-bold">&copy; UADS 2024. All Rights Reserved</p>
 				</div>
 				<div className="flex justify-center w-full lg:w-auto">
-					<Socials />
+					<Socials background="bg-brown" hoverBackground="bg-light-pink" iconColor="text-light-pink" hoverIconColor="text-black" />
 				</div>
 			</div>
 		</div>

diff --git a/web/src/components/Socials.tsx b/web/src/components/Socials.tsx
@@ -2,37 +2,44 @@ import { Link } from "react-router-dom";
 import { FaFacebookF, FaInstagram, FaDiscord, FaTiktok } from "react-icons/fa";
 import { IoMdMail } from "react-icons/io";
 
-export default function Socials() {
+interface SocialsProps {
+    background: string;
+    hoverBackground: string;
+    iconColor: string;
+    hoverIconColor: string;
+}
+
+export default function Socials({ background, hoverBackground, iconColor, hoverIconColor }: SocialsProps) {
 	return (
 		<>
 			<div className="w-80 flex justify-between items-center" data-testid="socialsComponent">
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://www.facebook.com/uoadessertsociety" target="_blank" aria-label="Facebook" className="w-full h-full flex justify-center items-center">
-						<FaFacebookF className="text-light-pink group-hover:text-black" data-testid="facebookLogo" />
+						<FaFacebookF className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="facebookLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://www.instagram.com/uoadessertsociety/" target="_blank" aria-label="Instagram" className="w-full h-full flex justify-center items-center">
-						<FaInstagram className="text-light-pink group-hover:text-black" data-testid="instagramLogo" />
+						<FaInstagram className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="instagramLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://discord.gg/dFuwHuU8FT" target="_blank" aria-label="Discord" className="w-full h-full flex justify-center items-center">
-						<FaDiscord className="text-light-pink group-hover:text-black" data-testid="discordLogo" />
+						<FaDiscord className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="discordLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="https://www.tiktok.com/@uoadessertsociety?_t=8mQ3asFY7Pz&_r=1" target="_blank" aria-label="TikTok" className="w-full h-full flex justify-center items-center">
-						<FaTiktok className="text-light-pink group-hover:text-black" data-testid="tiktokLogo" />
+						<FaTiktok className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="tiktokLogo" />
 					</Link>
 				</div>
 
-				<div className="w-10 h-10 bg-brown rounded-full hover:bg-light-pink cursor-pointer group">
+				<div className={`w-10 h-10 ${background} rounded-full hover:${hoverBackground} cursor-pointer group`}>
 					<Link to="mailto:uoadessertsociety@gmail.com" target="_blank" aria-label="Email" className="w-full h-full flex justify-center items-center">
-						<IoMdMail className="text-light-pink group-hover:text-black" data-testid="emailLogo" />
+						<IoMdMail className={`${iconColor} group-hover:${hoverIconColor}`} data-testid="emailLogo" />
 					</Link>
 				</div>
 			</div>