[TOOL-3684] Dashboard: Add FTUX in project overview page

Author: MananTank

apps/dashboard/src/@/components/blocks/code-segment.client.tsx

@@ -96,7 +96,6 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
             onClick: () => setEnvironment(env.environment),
             isActive: activeEnvironment === env.environment,
             name: env.title,
-            isEnabled: true,
           }))}
           tabClassName="text-sm gap-2 !text-sm"
           tabIconClassName="size-4"

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -91,13 +91,11 @@ export function DatePickerWithRange(props: {
                     name: "From",
                     onClick: () => setScreen("from"),
                     isActive: screen === "from",
-                    isEnabled: true,
                   },
                   {
                     name: "To",
                     onClick: () => setScreen("to"),
                     isActive: screen === "to",
-                    isEnabled: true,
                   },
                 ]}
               />

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -79,7 +79,7 @@ export function TabButtons(props: {
     name: React.ReactNode;
     onClick: () => void;
     isActive: boolean;
-    isEnabled?: boolean;
+    isDisabled?: boolean;
     icon?: React.FC<{ className?: string }>;
   }[];
   tabClassName?: string;
@@ -119,11 +119,11 @@ export function TabButtons(props: {
                   "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
                   !tab.isActive &&
                     "text-muted-foreground hover:text-foreground",
-                  !tab.isEnabled && "cursor-not-allowed opacity-50",
+                  tab.isDisabled && "cursor-not-allowed opacity-50",
                   props.tabClassName,
                   tab.isActive && props.activeTabClassName,
                 )}
-                onClick={tab.isEnabled ? tab.onClick : undefined}
+                onClick={!tab.isDisabled ? tab.onClick : undefined}
               >
                 {tab.icon && (
                   <tab.icon className={cn("size-6", props.tabIconClassName)} />

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx

@@ -71,7 +71,6 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
                   name: mode,
                   isActive: mode === listingMode,
                   onClick: () => setListingMode(mode),
-                  isEnabled: true,
                 }))}
                 tabClassName="text-sm gap-2 !text-sm"
                 tabContainerClassName="gap-0.5"

apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx

@@ -100,7 +100,6 @@ const DeployOptions = (props: {
           key,
           name: value.title,
           isActive: activeTab === key,
-          isEnabled: true,
           onClick: () => setActiveTab(key as TabId),
         }))}
         tabClassName="font-medium"

apps/dashboard/src/app/login/onboarding/LoginOrSignup/LoginOrSignup.tsx

@@ -89,13 +89,11 @@ export function LoginOrSignup(props: {
             name: "Create account",
             onClick: () => setTab("signup"),
             isActive: tab === "signup",
-            isEnabled: true,
           },
           {
             name: "I already have an account",
             onClick: () => setTab("login"),
             isActive: tab === "login",
-            isEnabled: true,
           },
         ]}
       />

apps/dashboard/src/app/login/onboarding/team-onboarding/InviteTeamMembers.tsx

@@ -227,13 +227,11 @@ function InviteModalContent(props: {
               name: "Starter",
               onClick: () => setPlanToShow("starter"),
               isActive: planToShow === "starter",
-              isEnabled: true,
             },
             {
               name: "Growth",
               onClick: () => setPlanToShow("growth"),
               isActive: planToShow === "growth",
-              isEnabled: true,
             },
           ]}
         />

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx

@@ -86,7 +86,6 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
           key,
           name,
           isActive: activeTab === key,
-          isEnabled: true,
           onClick: () => setActiveTab(key),
           icon:
             (key === "aws-kms" && !isAwsKmsConfigured) ||

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx

@@ -62,13 +62,11 @@ export function TeamMembersSettingsPage(props: {
             isActive: manageTab === "members",
             name: "Team Members",
             onClick: () => setManageTab("members"),
-            isEnabled: true,
           },
           {
             isActive: manageTab === "invites",
             name: "Pending Invites",
             onClick: () => setManageTab("invites"),
-            isEnabled: true,
           },
         ]}
       />

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState } from "react";
+import { TabButtons } from "../../../../../../@/components/ui/tabs";
+
+type Tab = "ts" | "react" | "react-native" | "dotnet" | "unity" | "unreal";
+
+export function IntegrateAPIKeyCodeTabs(props: {
+  tabs: Record<Tab, React.ReactNode>;
+}) {
+  const [tab, setTab] = useState<Tab>("ts");
+
+  return (
+    <div>
+      <TabButtons
+        tabs={[
+          {
+            name: "TypeScript",
+            onClick: () => setTab("ts"),
+            isActive: tab === "ts",
+          },
+          {
+            name: "React",
+            onClick: () => setTab("react"),
+            isActive: tab === "react",
+          },
+          {
+            name: "React Native",
+            onClick: () => setTab("react-native"),
+            isActive: tab === "react-native",
+          },
+          {
+            name: ".NET",
+            onClick: () => setTab("dotnet"),
+            isActive: tab === "dotnet",
+          },
+          {
+            name: "Unity",
+            onClick: () => setTab("unity"),
+            isActive: tab === "unity",
+          },
+          {
+            name: "Unreal Engine",
+            onClick: () => setTab("unreal"),
+            isActive: tab === "unreal",
+          },
+        ]}
+      />
+      <div className="h-3" />
+      {props.tabs[tab]}
+    </div>
+  );
+}