Added share button in each card

src/components/Card.jsx

@@ -1,8 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import { motion } from "framer-motion";
+import ShareModal from "./ShareModal";
 
 const Card = ({ title, link, description, i, img }) => {
+
+  const [isModalActive, setIsModalActive] = useState(false)
+
+ function shareHandler(e) {
+  e.preventDefault();
+  setIsModalActive(!isModalActive)
+ }
+
+ function closeModal(){
+  setIsModalActive(!isModalActive)
+ }
+
   return (
+    <>
     <a href={link} target={"_blank"} rel="noreferrer">
       <motion.div
         className="card border-b-2 bg-gradient-to-r from-[#545454] to-[#807f7f]  border-b-[#000000] flex flex-col rounded-lg  gap-4 p-4 shadow-3xl h-[16rem] w-[24rem] hover:shadow-4xl "
@@ -11,9 +25,17 @@ const Card = ({ title, link, description, i, img }) => {
         animate={{ opacity: 1, translateX: 0 }}
         transition={{ duration: 0.2, delay: i * 0.2 }}
       >
-        <div className="img img-container self-center">
+
+
+        <div className="flex flex-row justify-between">
           {/* src={`'${img}'`} */}
-          <img className="rounded-sm w-40 h-20" src={img} alt="img" />
+          <div className="w-1/4"></div>
+          <div className="w-2/4">
+            <img className="rounded-sm w-40 h-20" src={img} alt="img" />
+          </div>
+          <div className="w-1/4 flex justify-end items-start">
+            <button className="z-10" onClick={ e => shareHandler(e)}><img className="w-[25px] transition-all hover:scale-125 ease-in-out" src="./share_icon.svg" alt="" /></button>
+          </div>
         </div>
 
         <div className="content flex flex-col gap-4 items-center">
@@ -26,7 +48,17 @@ const Card = ({ title, link, description, i, img }) => {
           </p>
         </div>
       </motion.div>
+
     </a>
+    {isModalActive ? 
+      <ShareModal 
+        closeModal={closeModal}
+        link={link}/> 
+    : null }
+
+
+  </>
+
   );
 };
 

src/components/ShareModal.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useState } from 'react'
+import SocialMediaShareBtn from './socialmedia/SocialMediaShareBtn'
+
+const ShareModal = ({closeModal, link}) => {
+
+
+    const [animateClick, setAnimateClick] = useState(false)
+
+    function Clicked(e) {
+        navigator.clipboard.writeText(link)
+        setAnimateClick(true)
+
+        setTimeout ( () => {
+            setAnimateClick(false)
+        },150)
+    }
+
+  return (
+    <div onClick={ () => closeModal()} className='absolute top-0 left-0 w-full h-screen bg-grape-300 bg-opacity-40 flex justify-center items-center z-20 transition-all ease-out'>
+
+      <div className='relative w-1/4 h-2/6 bg-grape-200 rounded-xl flex flex-col'>
+        <div className='w-full flex justify-between'>
+            <h2 className='text-xl p-4 text-white font-inter'>Share</h2>
+            <button onClick={ () => closeModal()} className='text-2xl px-5 py-0 text-white font-thin'>X</button>
+        </div>
+
+        <div className='p-5 flex flex-row gap-5'>
+
+            <SocialMediaShareBtn 
+                socialMediaName={"Facebook"}
+                shareTo={`https://www.facebook.com/sharer/sharer.php?u=${link}`}/>
+
+            <SocialMediaShareBtn 
+                socialMediaName={"Twitter"}
+                shareTo={`https://www.twitter.com/intent/tweet?url=${link}&text="Hey guys, I found a cool resource wich can help you in your developer career!"`}/>
+        </div>
+
+
+        <div className='w-5/6 p-5 m-auto rounded-xl bg-grape-50 flex flex-row justify-between items-center'>
+            <p className='text-xs'>{link}</p>
+            <button onClick={ e => Clicked(e)}
+                    className={`bg-gray-800 hover:scale-[1.02] px-4 py-1 rounded-xl transition-all ease-in-out font-roboto text-white ${animateClick ? "animateClick" : ""}`}
+                    >Copy
+            </button>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default ShareModal

src/components/socialmedia/SocialMediaShareBtn.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const SocialMediaShareBtn = ({socialMediaName,shareTo}) => {
+  return (
+
+          <figure className='w-[50px] h-[50px] flex flex-col justify-center items-center'>
+              <a href={shareTo} target="_blank">
+                <img className="w-full h-full cursor-pointer" src={`./SocialMedia/${socialMediaName}_icon.png`} alt={`${socialMediaName} icon`} />
+              </a>
+              <figcaption className='text-white text-sm font-light'>{socialMediaName}</figcaption>
+          </figure>
+  )
+}
+
+export default SocialMediaShareBtn

src/index.css

@@ -22,4 +22,16 @@
 }
 .img-container img:hover {
     transform: scale(0.7);
+}
+
+.text-white{
+    color:white;
+}
+
+.bg-gray-800{
+    background-color: rgb(70,70,70);
+}
+
+.animateClick {
+    background-color: rgb(130,130,130);
 }