Update App.js

src/App.js

@@ -1,27 +1,39 @@
 import './App.css';
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
 const App = () => {
   const url = "https://api.quotable.io/random";
   let quoteData = {
     content: "Let time be your only competitor.",
     author: "Ahmed Saber"
   }
-  const [quote, setQuote] = useState(quoteData)
+  const [quote, setQuote] = useState(quoteData);
 
   const generateQuote = () => {
     fetch(url)
       .then(response => response.json())
       .then(data => {
-        console.log(data)
-        setQuote(data)
+        console.log(data);
+        setQuote(data);
       });
-  }
+  };
 
   const copy = () => {
-    navigator.clipboard.writeText(quote.author + " once said: " + quote.content)
-    alert('copied')
-  }
+    navigator.clipboard.writeText(quote.author + " once said: " + quote.content);
+    alert('Copied!');
+  };
+
+  const shareToTwitter = () => {
+    const tweetText = `${quote.content} - ${quote.author}`;
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`;
+    window.open(twitterUrl, '_blank');
+  };
+
+  const shareToWhatsApp = () => {
+    const whatsappText = `${quote.content} - ${quote.author}`;
+    const whatsappUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(whatsappText)}`;
+    window.open(whatsappUrl, '_blank');
+  };
 
   return (
     <>
@@ -32,11 +44,12 @@ const App = () => {
         <div className="btns">
           <button onClick={copy} className="btn">Copy</button>
           <button onClick={generateQuote}>Generate Another Quote</button>
+          <button onClick={shareToTwitter}>Share to Twitter</button>
+          <button onClick={shareToWhatsApp}>Share to WhatsApp</button>
         </div>
       </div>
     </>
-  )
-}
-
+  );
+};
 
 export default App;