added like and translate functionality

src/components/Card.jsx

@@ -1,10 +1,21 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import * as htmlToImage from 'html-to-image';
 
 const Card = ({ id, color1, color2, text, date, handleDeleteNote, writer }) => {
 
+  // State for the like button and like count
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(0);
+  const [translatedText, setTranslatedText] = useState('');
+
+  // Toggle the like state and update like count
+  const handleLike = () => {
+    setLiked(!liked);
+    setLikeCount(liked ? likeCount - 1 : likeCount + 1);
+  };
+
   // code for listen text speech
   const msg = new SpeechSynthesisUtterance();
   msg.text = text;
@@ -15,7 +26,7 @@ const Card = ({ id, color1, color2, text, date, handleDeleteNote, writer }) => {
   // code for clipboard and toastify
   const handleCopyText = () => {
     navigator.clipboard.writeText(text).then(
-      (success) =>
+      () =>
         toast('📋 Successfully Copied Text!', {
           position: 'top-center',
           autoClose: 2000,
@@ -44,11 +55,10 @@ const Card = ({ id, color1, color2, text, date, handleDeleteNote, writer }) => {
           console.log('Error while using Web share API:' + err);
         });
     } else {
-      alert("Browser doesn't support this API !");
+      alert("Browser doesn't support this API!");
     }
   };
 
-
   // code for convert html to image
   const domEl = useRef(null);
   const downloadImage = async () => {
@@ -59,37 +69,80 @@ const Card = ({ id, color1, color2, text, date, handleDeleteNote, writer }) => {
     link.click();
   };
 
+  // code for translating text
+  const translateText = async () => {
+    const targetLang = prompt('Enter the target language code (e.g., "es" for Spanish):');
+    if (!targetLang) return;
+
+    try {
+      const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLang}&dt=t&q=${encodeURIComponent(text)}`);
+      const data = await response.json();
+      const translatedText = data[0][0][0];
+      setTranslatedText(translatedText);
+      toast('🌐 Translation successful!', {
+        position: 'top-center',
+        autoClose: 2000,
+      });
+    } catch (error) {
+      console.error('Translation error:', error);
+      toast.error('Translation failed. Please try again.', {
+        position: 'top-center',
+        autoClose: 2000,
+      });
+    }
+  };
+
   return (
     <>
       <div
         className="card"
         ref={domEl}
         style={{
           background: `linear-gradient(40deg, #${color1} -200%, #${color2} 150%)`,
-          // border: `1px solid #${color2}`,
         }}
       >
+
         <div className="text">
           <i className="fas fa-quote-left"></i>
           <span>{text}</span>
           <i className="fas fa-quote-right"></i>
         </div>
+        {translatedText && (
+          <div className="translated-text text">
+            <i className="fas fa-language pr-2"></i>
+            <span className='text-gray-500 underline'>{translatedText}</span>
+          </div>
+        )}
         <div className="footer-writer">
           <span>~ By {writer ? writer : 'Danish'}</span>
           <div className="footer">
             <small>
               <i className="fa-solid fa-calendar-day"></i>
               {date}
             </small>
+            {/* Like Button with Like Count */}
+            <div className="like-section">
+                <div className="like-container flex items-center justify-center">
+                  <span className="like-count text-sm">{likeCount} Likes</span>
+                  <i
+                    className={`fa-solid fa-heart ${liked ? 'liked' : ''}`}
+                    onClick={handleLike}
+                    style={{ color: liked ? 'red' : 'gray' }}
+                    title="like"
+                  ></i>
+                </div>
+              </div>
             <div className="footer-icon">
               <i className="fa-solid fa-download" onClick={downloadImage} title="download"></i>
               <i className="fa-solid fa-volume-up" onClick={talk} title="volume"></i>
               <i className="fa-solid fa-share" onClick={handleShareText} title="share"></i>
               <i className="fa-sharp fa-solid fa-copy" onClick={handleCopyText} title="copy"></i>
+              <i className="fa-solid fa-language pr-2" onClick={translateText} title="translate"></i>
               <i
                 className="fa-solid fa-trash"
                 onClick={() => handleDeleteNote(id)}
-                title="delete" ></i>
+                title="delete"
+              ></i>
             </div>
           </div>
         </div>

src/index.css

@@ -492,4 +492,25 @@ input:checked+.slider:before {
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: initial 0 0 6px #8e8e8e;
   border-radius: 1px;
-}
+}
+
+.liked {
+  color: red;
+  transition: color 0.3s ease;
+}
+
+.footer-icon i {
+  cursor: pointer;
+}
+
+.like-section {
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.like-count {
+  margin-right: 5px;
+  font-size: 14px;
+  font-weight: bold;
+}