feat: share episodes

Avdhesh-Varshney · Jul 4, 2024 · 0876036 · 0876036
1 parent 6c8c41f
commit 0876036
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/css/Home.css b/src/css/Home.css
@@ -171,7 +171,14 @@
   border-radius: 100%;
 }
 
-
+.shareButton{
+  border: none;
+  padding: 4px 14px;
+  outline: none;
+  border-radius: 20px;
+  background-color: #574B90;
+  color: white;
+}
 
 .gap-10{
   gap: 40px;

diff --git a/src/pages/resources/audio/ChanakyaAudio.jsx b/src/pages/resources/audio/ChanakyaAudio.jsx
@@ -15,6 +15,13 @@ const ChanakyaAudio = ({ setProgress }) => {
     setPlaybackRate(rate);
   };
 
+  let shareData = {
+    title: "Chanakya's Story",
+    text: "Audio files on Chanakya's life and lessons!!",
+    url: window.location.href,
+  };
+
+
   useEffect(() => {
     const getData = async () => {
       setProgress(50);
@@ -72,19 +79,28 @@ const ChanakyaAudio = ({ setProgress }) => {
     }
   };
 
+  const ShareHandler = async () => {
+    await navigator.share(shareData);
+  }
+
   return (
     <div className="container">
-      <div className="container">
-        <input
-          type="number"
-          placeholder="Enter episode number"
-          value={value}
-          onChange={handleChange}
-          onKeyDown={handleKeyPress}
-        />
-        <button type="submit" className="btn btn-dark" onClick={handleClick}>
-          Enter
-        </button>
+      <div className="flex ">
+        <div className="container">
+          <input
+            type="number"
+            placeholder="Enter episode number"
+            value={value}
+            onChange={handleChange}
+            onKeyDown={handleKeyPress}
+          />
+          <button type="submit" className="btn btn-dark" onClick={handleClick}>
+            Enter
+          </button>
+        </div>
+        <div>
+          <button onClick={()=>ShareHandler()} className="shareButton">Share</button>
+        </div>
       </div>
 
       <div className="card" style={{ width: "20rem" }}>