From 53cc774d522a4c071dcdfc64fb48b17129af4284 Mon Sep 17 00:00:00 2001
From: Florian RICHER <florian.richer@unova.fr>
Date: Sun, 4 Jun 2023 21:17:16 +0200
Subject: [PATCH] Add social links

---
 package-lock.json                           | 11 ++++++++++-
 package.json                                |  3 ++-
 src/components/TopComponent.tsx             | 21 ++++++++++++++++++++-
 src/components/social_link/SocialLink.tsx   | 18 ++++++++++++++++++
 src/components/social_link/SocialLinks.scss | 13 +++++++++++++
 src/components/social_link/SocialLinks.tsx  | 16 ++++++++++++++++
 6 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 src/components/social_link/SocialLink.tsx
 create mode 100644 src/components/social_link/SocialLinks.scss
 create mode 100644 src/components/social_link/SocialLinks.tsx

diff --git a/package-lock.json b/package-lock.json
index 1e78baa..95a18ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.9.0"
       },
       "devDependencies": {
         "@types/node": "^20.2.5",
@@ -1536,6 +1537,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+      "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 6030ed5..a3cd0b0 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.9.0"
   },
   "devDependencies": {
     "@types/node": "^20.2.5",
diff --git a/src/components/TopComponent.tsx b/src/components/TopComponent.tsx
index 44b8ae5..ba47898 100644
--- a/src/components/TopComponent.tsx
+++ b/src/components/TopComponent.tsx
@@ -1,4 +1,7 @@
+import SocialLink from './social_link/SocialLink'
+import SocialLinks from './social_link/SocialLinks'
 import './TopComponent.scss'
+import { FaEnvelope, FaGithub, FaLinkedin } from 'react-icons/fa'
 
 function TopComponent() {
     return (
@@ -9,7 +12,6 @@ function TopComponent() {
             <div className='top__presentation'>
                 <h1>Florian RICHER</h1>
                 <h4>Développeur d´application Web et Mobile</h4>
-                {/*Reseau sociaux*/}
                 <p>
                     Découvrez mon parcours en développement, où ma passion précoce pour la programmation a débuté avec la
                     création d'applications 3D utilisant OpenGL et s'est étendue à la maîtrise de diverses technologies,
@@ -17,6 +19,23 @@ function TopComponent() {
                     d'applications mobiles avec Flutter et le développement système en Rust, toujours animé par mon désir
                     inépuisable d'apprendre et ma curiosité sans bornes.
                 </p>
+                <SocialLinks>
+                <SocialLink
+                        icon={<FaGithub />}
+                        name="Github"
+                        url="https://github.com/mrdev023"
+                    />
+                    <SocialLink
+                        icon={<FaLinkedin />}
+                        name="Linkedin"
+                        url="https://www.linkedin.com/in/florian-richer-80960b129/"
+                    />
+                    <SocialLink
+                        icon={<FaEnvelope />}
+                        name="Mail"
+                        url="mailto:florian.richer@protonmail.com"
+                    />
+                </SocialLinks>
             </div>
         </div>
     )
diff --git a/src/components/social_link/SocialLink.tsx b/src/components/social_link/SocialLink.tsx
new file mode 100644
index 0000000..e59b4fa
--- /dev/null
+++ b/src/components/social_link/SocialLink.tsx
@@ -0,0 +1,18 @@
+import react, { ReactNode } from 'react'
+
+type SocialLinkProps = {
+    icon: ReactNode,
+    url: string,
+    name: string
+}
+
+function SocialLink({ icon, url, name }: SocialLinkProps) {
+    return (
+        <a className="social_link" href={url} target="_blank">
+            {icon}
+            <span>{name}</span>
+        </a>
+    )
+}
+
+export default SocialLink
\ No newline at end of file
diff --git a/src/components/social_link/SocialLinks.scss b/src/components/social_link/SocialLinks.scss
new file mode 100644
index 0000000..33a801d
--- /dev/null
+++ b/src/components/social_link/SocialLinks.scss
@@ -0,0 +1,13 @@
+.social_links {
+    @apply flex gap-5 justify-center flex-wrap my-5;
+
+    & > .social_link {
+        & > svg {
+            @apply mx-auto scale-150 mb-1;
+        }
+
+        & > span {
+            @apply text-sm;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/social_link/SocialLinks.tsx b/src/components/social_link/SocialLinks.tsx
new file mode 100644
index 0000000..640d8bf
--- /dev/null
+++ b/src/components/social_link/SocialLinks.tsx
@@ -0,0 +1,16 @@
+import './SocialLinks.scss'
+import react, { ReactNode } from 'react'
+
+type SocialLinksProps = {
+    children: ReactNode
+}
+
+function SocialLinks({ children }: SocialLinksProps) {
+    return (
+        <div className='social_links'>
+            {children}
+        </div>
+    )
+}
+
+export default SocialLinks
\ No newline at end of file