Add share with others button

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -9,6 +9,8 @@ import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
 import { RoadmapActionButton } from './RoadmapActionButton';
 import { Lock, Shapes } from 'lucide-react';
+import { Modal } from '../Modal';
+import { ShareSuccess } from '../ShareOptions/ShareSuccess';
 
 type RoadmapHeaderProps = {};
 
@@ -22,9 +24,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     _id: roadmapId,
     creator,
     team,
+    visibility,
   } = useStore(currentRoadmap) || {};
 
   const [isSharing, setIsSharing] = useState(false);
+  const [isSharingWithOthers, setIsSharingWithOthers] = useState(false);
   const toast = useToast();
 
   async function deleteResource() {
@@ -65,6 +69,22 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${creator?.avatar}`
     : '/images/default-avatar.png';
 
+  const sharingWithOthersModal = isSharingWithOthers && (
+    <Modal
+      onClose={() => setIsSharingWithOthers(false)}
+      wrapperClassName="max-w-lg"
+      bodyClassName="p-4 flex flex-col"
+    >
+      <ShareSuccess
+        visibility="public"
+        roadmapId={roadmapId!}
+        description={description}
+        onClose={() => setIsSharingWithOthers(false)}
+        isSharingWithOthers={true}
+      />
+    </Modal>
+  );
+
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
@@ -117,8 +137,9 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               <span className="ml-2">Subscribe</span>
             </button>
           </div>
-          {$canManageCurrentRoadmap && (
           <div className="flex items-center gap-2">
+            {$canManageCurrentRoadmap && (
+              <>
                 {isSharing && $currentRoadmap && (
                   <ShareOptionsModal
                     isDiscoverable={$currentRoadmap.isDiscoverable}
@@ -172,8 +193,22 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                     deleteResource().finally(() => null);
                   }}
                 />
-            </div>
+              </>
             )}
+
+            {!$canManageCurrentRoadmap && visibility === 'public' && (
+              <>
+                {sharingWithOthersModal}
+                <button
+                  onClick={() => setIsSharingWithOthers(true)}
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
+                >
+                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  Share with Others
+                </button>
+              </>
+            )}
+          </div>
         </div>
 
         <RoadmapHint

src/components/ShareOptions/ShareSuccess.tsx

@@ -8,10 +8,17 @@ type ShareSuccessProps = {
   onClose: () => void;
   visibility: AllowedRoadmapVisibility;
   description?: string;
+  isSharingWithOthers?: boolean;
 };
 
 export function ShareSuccess(props: ShareSuccessProps) {
-  const { roadmapId, onClose, description, visibility } = props;
+  const {
+    roadmapId,
+    onClose,
+    description,
+    visibility,
+    isSharingWithOthers = false,
+  } = props;
 
   const baseUrl = import.meta.env.DEV
     ? 'http://localhost:3000'
@@ -42,7 +49,11 @@ export function ShareSuccess(props: ShareSuccessProps) {
     <div className="flex grow flex-col justify-center">
       <div className="mt-5 flex grow flex-col items-center justify-center gap-1.5">
         <CheckCircle className="h-14 w-14 text-green-500" />
+        {isSharingWithOthers ? (
+          <h3 className="text-xl font-medium">Sharing with Others</h3>
+        ) : (
           <h3 className="text-xl font-medium">Sharing Settings Updated</h3>
+        )}
       </div>
 
       <input
@@ -55,15 +66,21 @@ export function ShareSuccess(props: ShareSuccessProps) {
           copyText(shareLink);
         }}
       />
+      {isSharingWithOthers ? (
+        <p className="mt-1 text-sm text-gray-400">
+          You can share the above link with anyone
+        </p>
+      ) : (
         <p className="mt-1 text-sm text-gray-400">
           You can share the above link with anyone who has access
         </p>
+      )}
 
       {visibility === 'public' && (
         <>
           <div className="-mx-4 mt-4 flex items-center gap-1.5">
             <span className="h-px grow bg-gray-300" />
-            <span className="text-xs uppercase text-gray-400 px-2">Or</span>
+            <span className="px-2 text-xs uppercase text-gray-400">Or</span>
             <span className="h-px grow bg-gray-300" />
           </div>