Team roadmaps listing page

src/components/CreateTeam/NotDropdown.tsx

@@ -0,0 +1,47 @@
+import ChevronDownIcon from '../../icons/chevron-down.svg';
+
+type NotDropdownProps = {
+  onClick: () => void;
+  selectedCount: number;
+  singularName: string;
+  pluralName: string;
+};
+
+export function NotDropdown(props: NotDropdownProps) {
+  const { onClick, selectedCount, singularName, pluralName } = props;
+
+  const singularOrPlural = selectedCount === 1 ? singularName : pluralName;
+
+  return (
+    <div
+      className="flex cursor-text items-center justify-between rounded-md border border-gray-300 px-3 py-2.5 hover:border-gray-400/50 hover:bg-gray-50"
+      role="button"
+      onClick={onClick}
+    >
+      {selectedCount > 0 && (
+        <div className="flex flex-col">
+          <p className="mb-1.5 text-base font-medium text-gray-800">
+            {selectedCount} {singularOrPlural} selected
+          </p>
+          <p className="text-sm text-gray-400">
+            Click to add or change selection
+          </p>
+        </div>
+      )}
+
+      {selectedCount === 0 && (
+        <div className="flex flex-col">
+          <p className="text-base text-gray-400">
+            Click to select {pluralName}
+          </p>
+        </div>
+      )}
+
+      <img
+        alt={singularName}
+        src={ChevronDownIcon}
+        className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+      />
+    </div>
+  );
+}

src/components/CreateTeam/RoadmapSelector.tsx

@@ -6,6 +6,7 @@ import { pageProgressMessage } from '../../stores/page';
 import type { TeamDocument } from './CreateTeamForm';
 import { UpdateTeamResourceModal } from './UpdateTeamResourceModal';
 import { SelectRoadmapModal } from './SelectRoadmapModal';
+import { NotDropdown } from './NotDropdown';
 
 export type TeamResourceConfig = {
   resourceId: string;
@@ -144,34 +145,14 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
         />
       )}
 
-      <div
+      <div className="mt-3">
-        className="mt-3 flex cursor-text items-center justify-between rounded-md border border-gray-300 px-3 py-2.5 hover:border-gray-400/50 hover:bg-gray-50"
+        <NotDropdown
-        role="button"
           onClick={() => {
             setShowSelectRoadmapModal(true);
           }}
-      >
+          selectedCount={teamResourceConfig.length}
-        {teamResourceConfig.length > 0 && (
+          singularName={'roadmap'}
-          <div className="flex flex-col">
+          pluralName={'roadmaps'}
-            <p className="mb-1.5 text-base font-medium text-gray-800">
-              {teamResourceConfig.length} roadmaps selected
-            </p>
-            <p className="text-sm text-gray-400">
-              Click to add or change selection
-            </p>
-          </div>
-        )}
-
-        {!teamResourceConfig.length && (
-          <div className="flex flex-col">
-            <p className="text-base text-gray-400">Click to select roadmaps</p>
-          </div>
-        )}
-
-        <img
-          alt={'roadmap'}
-          src={ChevronDownIcon}
-          className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
         />
       </div>
 

src/components/TeamRoadmaps.tsx

@@ -213,6 +213,19 @@ export function TeamRoadmaps() {
   return (
     <div>
       {addRoadmapModal}
+      <div className="mb-3 flex items-center justify-between">
+        <span className={'text-gray-400'}>
+          {resourceConfigs.length} roadmap(s) selected
+        </span>
+        {canManageCurrentTeam && (
+          <button
+            className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-gray-500 underline hover:bg-gray-100 hover:text-gray-900"
+            onClick={() => setIsAddingRoadmap(true)}
+          >
+            Add / Remove Roadmaps
+          </button>
+        )}
+      </div>
       <div className={'grid grid-cols-1 gap-3 sm:grid-cols-2'}>
         {changingRoadmapId && (
           <UpdateTeamResourceModal

src/icons/plus-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus-2"><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"/><polyline points="14 2 14 8 20 8"/><path d="M3 15h6"/><path d="M6 12v6"/></svg>