[UI v2] feat: Starts page layout for concurrency page

ui-v2/src/components/concurrency/concurrency-page-title.tsx

@@ -0,0 +1,15 @@
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbList,
+} from "@/components/ui/breadcrumb";
+
+export const ConcurrencyPageTitle = () => (
+	<Breadcrumb>
+		<BreadcrumbList>
+			<BreadcrumbItem className="text-xl font-semibold">
+				Concurrency
+			</BreadcrumbItem>
+		</BreadcrumbList>
+	</Breadcrumb>
+);

ui-v2/src/components/concurrency/concurrency-page.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { ConcurrencyPageTitle } from "./concurrency-page-title";
+import { ConcurrencyTabs } from "./concurrency-tabs";
+import { GlobalConcurrencyView } from "./global-concurrency-view";
+import { TaskRunConcurrencyView } from "./task-run-concurrenct-view";
+
+type Tab = "Global" | "Task Run";
+
+export const ConcurrencyPage = (): JSX.Element => {
+	// TODO: Use URL query instead
+	const [tab, setTab] = useState<Tab>("Global");
+
+	return (
+		<div className="flex flex-col gap-4">
+			<ConcurrencyPageTitle />
+			<div className="flex flex-col gap-6">
+				<ConcurrencyTabs
+					value={tab}
+					onValueChange={setTab}
+					globalView={<GlobalConcurrencyView />}
+					taskRunView={<TaskRunConcurrencyView />}
+				/>
+			</div>
+		</div>
+	);
+};

ui-v2/src/components/concurrency/concurrency-tabs.tsx

@@ -0,0 +1,35 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+type Tabs = "Global" | "Task Run";
+
+type Props = {
+	globalView: React.ReactNode;
+	onValueChange: (value: Tabs) => void;
+	taskRunView: React.ReactNode;
+	value: Tabs;
+};
+
+// TODO: Move Tabs for navigation to a generic styled component
+
+export const ConcurrencyTabs = ({
+	globalView,
+	onValueChange,
+	taskRunView,
+	value,
+}: Props): JSX.Element => {
+	return (
+		<Tabs
+			defaultValue="Global"
+			className="w-[400px]"
+			value={value}
+			onValueChange={(value) => onValueChange(value as Tabs)}
+		>
+			<TabsList className="grid w-full grid-cols-2">
+				<TabsTrigger value="Global">Global</TabsTrigger>
+				<TabsTrigger value="Task Run">Task Run</TabsTrigger>
+			</TabsList>
+			<TabsContent value="Global">{globalView}</TabsContent>
+			<TabsContent value="Task Run">{taskRunView}</TabsContent>
+		</Tabs>
+	);
+};

ui-v2/src/components/concurrency/global-concurrency-view/index.tsx

@@ -0,0 +1,3 @@
+export const GlobalConcurrencyView = () => {
+	return <div>🚧🚧 Pardon our dust! 🚧🚧</div>;
+};

ui-v2/src/components/concurrency/task-run-concurrenct-view/index.tsx

@@ -0,0 +1,3 @@
+export const TaskRunConcurrencyView = () => {
+	return <div>🚧🚧 Pardon our dust! 🚧🚧</div>;
+};

ui-v2/src/components/layouts/MainLayout.tsx

@@ -1,12 +1,12 @@
-import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/ui/app-sidebar";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "../ui/toaster";
 
 export function MainLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<SidebarProvider>
 			<AppSidebar />
-			<main className="flex-1 overflow-auto">{children}</main>
+			<main className="flex-1 overflow-auto p-4">{children}</main>
 			<Toaster />
 		</SidebarProvider>
 	);

ui-v2/src/components/variables/layout.tsx

@@ -14,7 +14,7 @@ export const VariablesLayout = ({
 	children: React.ReactNode;
 }) => {
 	return (
-		<div className="flex flex-col gap-4 p-4">
+		<div className="flex flex-col gap-4">
 			<div className="flex items-center gap-2">
 				<Breadcrumb>
 					<BreadcrumbList>

ui-v2/src/routes/concurrency-limits.tsx

@@ -1,9 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
 
+import { ConcurrencyPage } from "@/components/concurrency/concurrency-page";
+
 export const Route = createFileRoute("/concurrency-limits")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return "🚧🚧 Pardon our dust! 🚧🚧";
+	return <ConcurrencyPage />;
 }