feat: added share music modal

app/components/ShareModal.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface ShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  shareableLink: string;
+}
+
+export const ShareModal: React.FC<ShareModalProps> = ({
+  isOpen,
+  onClose,
+  shareableLink,
+}) => {
+  if (!isOpen) return null;
+
+  const platforms = ["Twitter", "LinkedIn", "WhatsApp"];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white rounded-lg p-6 shadow-lg max-w-lg w-full relative">
+        <h2 className="text-lg font-bold text-gray-900">Share this link</h2>
+        <button
+          className="absolute top-3 right-3 text-gray-400 hover:text-gray-600"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          &times;
+        </button>
+        <div className="space-y-4 mt-4">
+          {platforms.map((platform) => (
+            <button
+              key={platform}
+              onClick={() =>
+                window.open(
+                  `https://www.${platform.toLowerCase()}.com/share?url=${encodeURIComponent(
+                    shareableLink
+                  )}`,
+                  "_blank"
+                )
+              }
+              className="w-full bg-purple-700 hover:bg-purple-800 text-white py-2 rounded-lg"
+            >
+              Share on {platform}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

app/components/StreamView.tsx

@@ -13,7 +13,7 @@ import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { YT_REGEX } from '../lib/utils'
 //@ts-ignore
 import YouTubePlayer from 'youtube-player';
-
+import { ShareModal } from '../components/ShareModal';
 interface Video {
     "id": string,
     "type": string,
@@ -43,7 +43,15 @@ export default function StreamView({
   const [loading, setLoading] = useState(false);
   const [playNextLoader, setPlayNextLoader] = useState(false);
   const videoPlayerRef = useRef<HTMLDivElement>();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const handleShare = () => {
+      setIsModalOpen(true);
+  }
+
+  const closeModal = () => {
+      setIsModalOpen(false);
+  }
   async function refreshStreams() {
     const res = await fetch(`/api/streams/?creatorId=${creatorId}`, {
         credentials: "include"
@@ -141,31 +149,6 @@ export default function StreamView({
     }
   }
 
-  const handleShare = () => {
-    const shareableLink = `${window.location.hostname}/creator/${creatorId}`
-    navigator.clipboard.writeText(shareableLink).then(() => {
-      toast.success('Link copied to clipboard!', {
-        position: "top-right",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      })
-    }, (err) => {
-      console.error('Could not copy text: ', err)
-      toast.error('Failed to copy link. Please try again.', {
-        position: "top-right",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-      })
-    })
-  }
 
   return (
     <div className="flex flex-col min-h-screen bg-[rgb(10,10,10)] text-gray-200">
@@ -274,6 +257,11 @@ export default function StreamView({
             pauseOnHover
             theme="dark"
         />
+          <ShareModal 
+                isOpen={isModalOpen} 
+                onClose={closeModal} 
+                shareableLink={`${window.location.hostname}/creator/${creatorId}`} 
+            />
     </div>
   )
-}
+}