FAIR SHARE 1.8.0

Add Social Media Icons Add socialMediaData.json Update App.js Update index.css Update index.html Update README.md
DavidGomezToca · Feb 7, 2025 · 3115606 · 3115606
1 parent cadd507
commit 3115606
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 
 - **STACK :**
 
-  - **Fair Share** : `1.7.0`
+  - **Fair Share** : `1.8.0`
   - **React** : `18.3.1`
   - **React Dom** : `18.3.1`
 
@@ -25,4 +25,4 @@
 - **CREDITS :**
 
   - **Author : [David Gómez](https://github.com/DavidGomezToca)**
-  - **Resources : [Flaticon](https://www.flaticon.com/)**
+  - **Icons : [Font Awesome](https://fontawesome.com)**
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fair-share",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,14 @@
     <meta name="Fair Share" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <title>Fair Share</title>
   </head>
   <body>

diff --git a/resources/img/Thumbnail.png b/resources/img/Thumbnail.png
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,5 +1,6 @@
 import { useState } from "react"
 import FriendsData from "../data/friendsData.json"
+import SocialMediaData from "../data/socialMediaData.json"
 
 /**
  * @component App.
@@ -136,8 +137,11 @@ export default function App() {
         {showAddFriend && <FormAddFriend onAddFriend={handleAddFriend} />}
         <Button onClick={handleShowAddFriend}>{showAddFriend ? "Close" : "Add friend"}</Button>
       </div>
-      {selectedFriend && <FormSplitBill selectedFriend={selectedFriend} onSplitBill={handleSplitBill} setShowMessage={setShowMessage} setSplitSuccess={setSplitSuccess} />}
-      {showMessage && <Message setShowMessage={setShowMessage} splitSuccess={splitSuccess} />}
+      <div>
+        {selectedFriend && <FormSplitBill selectedFriend={selectedFriend} onSplitBill={handleSplitBill} setShowMessage={setShowMessage} setSplitSuccess={setSplitSuccess} />}
+        {showMessage && <Message setShowMessage={setShowMessage} splitSuccess={splitSuccess} />}
+        <SocialMedia />
+      </div>
     </div>
   )
 }
@@ -429,4 +433,38 @@ function Message({ setShowMessage, splitSuccess }) {
       </div>
     </div>
   )
+}
+
+/**
+ * @component SocialMedia.
+ * @returns {JSX.Element} - The Social Media component.
+ */
+function SocialMedia() {
+  /**
+   * Social Medias List.
+   * @type {object}.
+   */
+  const socialMedias = SocialMediaData.socialMedias
+
+  return (
+    <div className="social-media">
+      {socialMedias.map((socialMedia) => (
+        <SocialMediaIcon key={`social-media-${socialMedia.name}`} url={socialMedia.url} icon={socialMedia.icon} />
+      ))}
+    </div>
+  )
+
+  /**
+   * @component Social Media Icon.
+   * @param {string} url - The URL of the social media.
+   * @param {string} icon - The icon of the social media.
+   * @returns {JSX.Element} - The Social Media Icon component.
+   */
+  function SocialMediaIcon({ url, icon }) {
+    return (
+      <a className="icon" href={url} target="_blank" rel="noreferrer">
+        <i className={icon} />
+      </a>
+    )
+  }
 }
diff --git a/src/data/socialMediaData.json b/src/data/socialMediaData.json
@@ -0,0 +1,24 @@
+{
+  "socialMedias": [
+    {
+      "name": "GitHub",
+      "url": "https://github.com/DavidGomezToca",
+      "icon": "fa-brands fa-github"
+    },
+    {
+      "name": "StackOverflow",
+      "url": "https://stackoverflow.com/users/23405761/david-gomez",
+      "icon": "fa-brands fa-stack-overflow"
+    },
+    {
+      "name": "LinkedIn",
+      "url": "https://www.linkedin.com/in/david-alejandro-gomez-toca",
+      "icon": "fa-brands fa-linkedin"
+    },
+    {
+      "name": "Twitter",
+      "url": "https://twitter.com/DavidGomezToca",
+      "icon": "fa-brands fa-twitter"
+    }
+  ]
+}
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,5 @@
 :root {
+  --color-text: #343a40;
   --color-lightest: #fff4e6;
   --color-light: #ffe8cc;
   --color-medium: #ffa94d;
@@ -24,7 +25,7 @@ html {
 
 body {
   min-height: 100vh;
-  color: #495057;
+  color: var(--color-text);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,7 +47,7 @@ body {
 
 .button {
   background-color: var(--color-medium);
-  color: #343a40;
+  color: var(--color-text);
   padding: 0.8rem 1.2rem;
   border: none;
   border-radius: 7px;
@@ -266,6 +267,34 @@ form h2 {
   transform: scale(1.02);
 }
 
+.social-media {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.social-media .icon {
+  text-decoration: none;
+  border: solid 2px;
+  border-radius: 100%;
+  transition: 0.3s;
+  color: var(--color-text);
+}
+
+.social-media .icon:hover {
+  transform: scale(1.2);
+}
+
+.social-media .icon i {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2.4rem;
+  width: 4rem;
+  height: 4rem;
+}
+
 @media (max-width: 1200px) {
   .app {
     grid-template-columns: 1fr;