♻️ refactor(components): update contact and social components

- rename contact to contacts for consistent naming
- move Socials components to shared directory
- update imports to reflect new structure

Author: isfopo

src/App.tsx

@@ -1,8 +1,8 @@
 import "./App.css";
 import { Header } from "components/Header";
-import { SocialPlatformLink } from "components/Header/Socials";
+import { SocialPlatformLink } from "components/Socials";
 import { AboutSection } from "components/Section/AboutSection";
-import { Contact, ContactSection } from "components/Section/ContactSection";
+import { Contacts, ContactSection } from "components/Section/ContactSection";
 import {
   ExperienceSection,
   ExperienceSectionProps,
@@ -144,7 +144,7 @@ const projects: Project[] = [
   },
 ];
 
-const contact: Contact = {
+const contacts: Contacts = {
   tel: "(502) 220-8265",
   mailto: "isaacpoolemusic@gmail.com",
 };
@@ -157,7 +157,7 @@ function App() {
       <SkillsSection skills={skills} />
       <ExperienceSection {...experience} />
       <ProjectsSection projects={projects} />
-      <ContactSection {...contact} />
+      <ContactSection contacts={contacts} socials={socials} />
     </>
   );
 }

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-scroll";
 import { SectionLabels, SectionType } from "consts";
 import styles from "./index.module.css";
-import { SocialPlatformLink, Socials } from "./Socials";
+import { SocialPlatformLink, Socials } from "../Socials";
 
 export interface HeaderProps {
   sections: readonly SectionType[];

src/components/Section/ContactSection/index.tsx

@@ -1,30 +1,35 @@
 import { Section } from "components/Section";
-import { Contact } from "lucide-react";
 import { ContactIcons } from "./ContactIcons";
 import styles from "./index.module.css";
+import { SocialPlatformLink, Socials } from "components/Socials";
 
-export interface Contact {
+export interface Contacts {
   tel: `(${string}) ${string}-${string}`;
   mailto: `${string}@${string}.${string}`;
 }
 
-const labels: Record<keyof Contact, string> = {
+const labels: Record<keyof Contacts, string> = {
   tel: "Phone",
   mailto: "Email",
 };
 
-export const ContactSection = (contact: Contact) => {
+export interface ContactSectionProps {
+  contacts: Contacts;
+  socials: SocialPlatformLink[];
+}
+
+export const ContactSection = ({ contacts, socials }: ContactSectionProps) => {
   return (
     <Section subject="contact" className={styles["contact"]}>
       <h3>Contact</h3>
       <div className={styles["container"]}>
-        {Object.keys(contact).map((key) => {
-          const value = contact[key as keyof Contact];
-          const label = labels[key as keyof Contact];
-          const icon = ContactIcons[key as keyof Contact];
+        {Object.keys(contacts).map((key) => {
+          const value = contacts[key as keyof Contacts];
+          const label = labels[key as keyof Contacts];
+          const icon = ContactIcons[key as keyof Contacts];
 
           return (
-            <a key={key} href={`${key}:${contact[key as keyof Contact]}`}>
+            <a key={key} href={`${key}:${contacts[key as keyof Contacts]}`}>
               <div className={styles["icon"]}>{icon}</div>
               <div className={styles["text"]}>
                 <p>{label}</p>
@@ -34,6 +39,7 @@ export const ContactSection = (contact: Contact) => {
           );
         })}
       </div>
+      <Socials platforms={socials} />
     </Section>
   );
 };