Merge pull request #147 from tusharshah21/social_icon

icons added similar to the video

Author: DhanushNehru

src/components/Footer.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { FaGithub, FaLinkedin } from "react-icons/fa"; 
+import { GrInstagram } from "react-icons/gr";
+import { FaXTwitter } from "react-icons/fa6";
+import { IoLogoYoutube } from "react-icons/io";
+import IconButton from "./IconButton";
+
+function App() {
+  const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1rem" // equivalent to gap-4
+  };
+
+  const iconStyle = { color: "white" }; // Style for white icons
+
+  return (
+    <div style={containerStyle}>
+      <a href="https://github.com/DhanushNehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
+        <IconButton text="DhanushNehru">
+          <FaGithub size={30} style={iconStyle} />
+        </IconButton>
+      </a>
+      <a href="https://www.linkedin.com/in/dhanushnehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
+        <IconButton text="dhanushnehru" color="#316FF6">
+          <FaLinkedin size={30} style={iconStyle} />
+        </IconButton>
+      </a>
+      <a href="https://www.instagram.com/dhanush_nehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
+        <IconButton text="dhanush_nehru" color="#d62976">
+          <GrInstagram size={30} style={iconStyle} />
+        </IconButton>
+      </a>
+      <a href="https://x.com/Dhanush_Nehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
+        <IconButton text="Dhanush_Nehru" color="black">
+          <FaXTwitter size={30} style={iconStyle} />
+        </IconButton>
+      </a>
+      <a href="https://www.youtube.com/@dhanushnehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
+        <IconButton text="@dhanushnehru" color="#FF0000">
+          <IoLogoYoutube size={30} style={iconStyle} />
+        </IconButton>
+      </a>
+    </div>
+  );
+}
+
+export default App;

src/components/IconButton.js

@@ -0,0 +1,43 @@
+import { useRef, useState } from "react"
+
+export default function IconButton({ children, text, color, ...props }) {
+  const [hovered, setHovered] = useState(false)
+  const ref = useRef(null)
+
+  const buttonStyle = {
+    display: "flex",
+    padding: "0.5rem", // equivalent to p-2
+    alignItems: "center",
+    borderRadius: "0.5rem", // equivalent to rounded-lg
+    color: "white",
+    backgroundColor: color || "black",
+    cursor: "pointer",
+    border: "none",
+    outline: "none"
+  }
+
+  const textDivStyle = {
+    overflowX: "hidden",
+    transition: "all 0.3s ease-out",
+    width: hovered ? ref.current?.offsetWidth || 0 : 0,
+  }
+
+  const textStyle = {
+    paddingLeft: "0.375rem", // equivalent to px-1.5
+    paddingRight: "0.375rem",
+  }
+
+  return (
+    <button
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={buttonStyle}
+      {...props}
+    >
+      {children}
+      <div style={textDivStyle}>
+        <span ref={ref} style={textStyle}>{text}</span>
+      </div>
+    </button>
+  )
+}

src/pages/EditorComponent.js

@@ -22,6 +22,7 @@ import {
   rapidApiKey,
 } from "../constants/constants";
 import { useAuth } from "../context/AuthContext";
+import Footer from "../components/Footer";
 
 const StyledButton = styled(Button)({
   display: "flex",
@@ -276,10 +277,11 @@ function EditorComponent() {
         </div>
       </StyledLayout>
       <OutputLayout>
-        {Array.isArray(output) &&
+        {/* {Array.isArray(output) &&
           output.map((result, i) => {
             return <div key={i}>{result}</div>;
-          })}
+          })} */}
+          <Footer/>
       </OutputLayout>
     </>
   );