wip volume tabs

apps/client/app/lib/types.ts

@@ -1,3 +1,4 @@
 import type { GetVolumeResponse } from "~/api-client";
 
-export type VolumeStatus = GetVolumeResponse["status"];
+export type Volume = GetVolumeResponse;
+export type VolumeStatus = Volume["status"];

apps/client/app/modules/details/tabs/info.tsx

@@ -0,0 +1,22 @@
+import { CreateVolumeForm } from "~/components/create-volume-form";
+import { Card } from "~/components/ui/card";
+import { HealthchecksCard } from "../components/healthchecks-card";
+import type { Volume } from "~/lib/types";
+
+type Props = {
+	volume: Volume;
+};
+
+export const VolumeInfoTabContent = ({ volume }: Props) => {
+	return (
+		<div className="grid gap-4 grid-cols-1 lg:grid-cols-3 lg:grid-rows-[auto_1fr]">
+			<Card className="p-6 lg:col-span-2 lg:row-span-2">
+				<CreateVolumeForm initialValues={{ ...volume, ...volume.config }} onSubmit={console.log} />
+			</Card>
+			<HealthchecksCard volume={volume} />
+			<Card className="p-6 h-full">
+				<h2 className="text-lg font-medium">Volume Information</h2>
+			</Card>
+		</div>
+	);
+};

apps/client/app/routes/details.tsx

@@ -17,6 +17,8 @@ import { HealthchecksCard } from "~/modules/details/components/healthchecks-card
 import type { Route } from "./+types/details";
 import { cn } from "~/lib/utils";
 import { StatusDot } from "~/components/status-dot";
+import { VolumeInfoTabContent } from "~/modules/details/tabs/info";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 	const volume = await getVolume({ path: { name: params.name ?? "" } });
@@ -116,15 +118,17 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
 					</Button>
 				</div>
 			</div>
-			<div className="grid gap-4 grid-cols-1 lg:grid-cols-3 lg:grid-rows-[auto_1fr]">
-				<Card className="p-6 lg:col-span-2 lg:row-span-2">
-					<CreateVolumeForm initialValues={{ ...data, ...data?.config }} onSubmit={console.log} />
-				</Card>
-				<HealthchecksCard volume={data} />
-				<Card className="p-6 h-full">
-					<h2 className="text-lg font-medium">Volume Information</h2>
-				</Card>
-			</div>
+			<Tabs defaultValue="info" className="mt-0">
+				<TabsList>
+					<TabsTrigger value="info">Configuration</TabsTrigger>
+					<TabsTrigger value="backups">Backups</TabsTrigger>
+					<TabsTrigger value="explorer">Eplorer</TabsTrigger>
+				</TabsList>
+				<TabsContent value="info">
+					<VolumeInfoTabContent volume={data} />
+				</TabsContent>
+				<TabsContent value="password">Change your password here.</TabsContent>
+			</Tabs>
 		</>
 	);
 }