From 93af8c61805abbd27d99dfbbc724aa819e21370a Mon Sep 17 00:00:00 2001
From: Rakesh <rakesh@gmail.com>
Date: Wed, 31 Jan 2024 12:39:16 +0530
Subject: [PATCH] social links added

---
 src/App.css                                   | 31 +++++++++++++++++++
 src/App.js                                    |  2 ++
 src/SocialFollow.js                           | 24 ++++++++++++++
 .../FaceRecognition/FaceRecognition.js        |  2 +-
 src/index.js                                  |  1 -
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/SocialFollow.js

diff --git a/src/App.css b/src/App.css
index 4494c45..a587a66 100644
--- a/src/App.css
+++ b/src/App.css
@@ -41,3 +41,34 @@
     transform: rotate(360deg);
   }
 }
+
+.social-container {
+  position: fixed;
+  top: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 25px 50px;
+}
+
+a.social {
+  margin: 0 1rem;
+  transition: transform 250ms;
+  display: inline-block;
+}
+
+a.social:hover {
+  transform: translateY(-2px);
+}
+
+a.github {
+  color: white;
+}
+
+a.linkedin {
+  color: royalblue;
+}
+
+a.instagram {
+  color: indianred;
+}
diff --git a/src/App.js b/src/App.js
index 9e2501c..5e31850 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import './App.css';
 import Logo from './components/Logo/Logo';
 import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
 import FaceRecognition from './components/FaceRecognition/FaceRecognition';
+import SocialFollow from './SocialFollow';
 
 const returnClarifaiRequestOptions = (imageUrl) => {
   const PAT = '9a79ac5267f54073853713833271f89d';
@@ -91,6 +92,7 @@ class App extends Component{
         onButtonSubmit = {this.onButtonSubmit} 
       />
       <FaceRecognition box = {this.state.box} imageUrl = {this.state.imageUrl}/>
+      <SocialFollow />
       <ParticlesBg type="circle" bg={true}/>
     </div>
     );
diff --git a/src/SocialFollow.js b/src/SocialFollow.js
new file mode 100644
index 0000000..563ae74
--- /dev/null
+++ b/src/SocialFollow.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faGithub,
+  faLinkedin,
+  faInstagram
+} from "@fortawesome/free-brands-svg-icons";
+
+export default function SocialFollow() {
+  return (
+    <div className="social-container">
+        <p className="white"></p>
+        <a href="https://github.com/TanmayMachkar" className="github social">
+          <FontAwesomeIcon icon={faGithub} size="2x" />
+        </a>
+        <a href="https://www.linkedin.com/in/tanmay-machkar-9369a0299" className="linkedin social">
+          <FontAwesomeIcon icon={faLinkedin} size="2x" />
+        </a>
+        <a href="https://www.instagram.com/_tanaana_02/" className="instagram social">
+          <FontAwesomeIcon icon={faInstagram} size="2x" />
+        </a>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/FaceRecognition/FaceRecognition.js b/src/components/FaceRecognition/FaceRecognition.js
index 39e5736..7467eb1 100644
--- a/src/components/FaceRecognition/FaceRecognition.js
+++ b/src/components/FaceRecognition/FaceRecognition.js
@@ -4,7 +4,7 @@ import './FaceRecognition.css';
 const FaceRecognition = ({imageUrl, box}) => {
 	return(
 		<div className = 'center ma'>
-			<div className = 'absolute mt2'>
+			<div className = 'absolute mt2 mb2'>
 				<img id = 'inputimage' alt = '' src = {imageUrl} width = '500px' height = 'auto'/>
 				<div className = 'bounding-box' style = {{top: box.topRow, bottom: box.bottomRow, left: box.leftCol, right: box.rightCol}}></div>
 			</div>
diff --git a/src/index.js b/src/index.js
index b3419f9..d96185c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,6 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'tachyons';
-import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(