feat: docker usage examples

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

@@ -0,0 +1,50 @@
+import { Card } from "~/components/ui/card";
+import type { Volume } from "~/lib/types";
+import CodeMirror from "@uiw/react-codemirror";
+import { yaml } from "@codemirror/lang-yaml";
+import { copilot } from "@uiw/codemirror-theme-copilot";
+import * as YML from "yaml";
+
+type Props = {
+	volume: Volume;
+};
+
+export const DockerTabContent = ({ volume }: Props) => {
+	const yamlString = YML.stringify({
+		services: {
+			nginx: {
+				image: "nginx:latest",
+				volumes: [`${volume.name}:/path/in/container`],
+			},
+		},
+		volumes: {
+			[volume.name]: {
+				external: true,
+			},
+		},
+	});
+
+	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">
+				<CodeMirror readOnly={true} value={yamlString} height="200px" extensions={[yaml()]} theme={copilot} />
+				Alternatively, you can use the following command to run a Docker container with the volume mounted:
+				<CodeMirror
+					readOnly={true}
+					value={`docker run -v ${volume.name}:/path/in/container nginx:latest`}
+					height="25px"
+					extensions={[yaml()]}
+					theme={copilot}
+				/>
+			</Card>
+			<Card className="p-6 h-full lg:row-span-2">
+				<h3 className="text-lg font-semibold mb-2 text-center">Using the volume with Docker</h3>
+				<div className="text-sm text-muted-foreground mb-4 text-center flex h-full">
+					This volume can be used in your Docker Compose files by referencing it as an external volume. The example
+					demonstrates how to mount the volume to a service (nginx in this case). Make sure to adjust the path inside
+					the container to fit your application's needs.
+				</div>
+			</Card>
+		</div>
+	);
+};

apps/client/app/routes/details.tsx

@@ -8,17 +8,15 @@ import {
 	mountVolumeMutation,
 	unmountVolumeMutation,
 } from "~/api-client/@tanstack/react-query.gen";
-import { CreateVolumeForm } from "~/components/create-volume-form";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
 import { VolumeIcon } from "~/components/volume-icon";
 import { parseError } from "~/lib/errors";
-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";
+import { DockerTabContent } from "~/modules/details/tabs/docker";
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 	const volume = await getVolume({ path: { name: params.name ?? "" } });
@@ -121,13 +119,14 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
 			<Tabs defaultValue="info" className="mt-0">
 				<TabsList>
 					<TabsTrigger value="info">Configuration</TabsTrigger>
-					<TabsTrigger value="backups">Backups</TabsTrigger>
-					<TabsTrigger value="explorer">Eplorer</TabsTrigger>
+					<TabsTrigger value="docker">Docker usage</TabsTrigger>
 				</TabsList>
 				<TabsContent value="info">
 					<VolumeInfoTabContent volume={data} />
 				</TabsContent>
-				<TabsContent value="password">Change your password here.</TabsContent>
+				<TabsContent value="docker">
+					<DockerTabContent volume={data} />
+				</TabsContent>
 			</Tabs>
 		</>
 	);

apps/client/package.json

@@ -9,6 +9,7 @@
 		"typecheck": "react-router typegen && tsc"
 	},
 	"dependencies": {
+		"@codemirror/lang-yaml": "^6.1.2",
 		"@hookform/resolvers": "^5.2.1",
 		"@ironmount/schemas": "workspace:*",
 		"@radix-ui/react-alert-dialog": "^1.1.15",
@@ -24,6 +25,8 @@
 		"@tanstack/react-query": "^5.84.2",
 		"@tanstack/react-query-devtools": "^5.85.9",
 		"@tanstack/react-table": "^8.21.3",
+		"@uiw/codemirror-theme-copilot": "^4.25.2",
+		"@uiw/react-codemirror": "^4.25.2",
 		"arktype": "^2.1.20",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -36,7 +39,8 @@
 		"react-hook-form": "^7.62.0",
 		"react-router": "^7.7.1",
 		"sonner": "^2.0.7",
-		"tailwind-merge": "^3.3.1"
+		"tailwind-merge": "^3.3.1",
+		"yaml": "^2.8.1"
 	},
 	"devDependencies": {
 		"@react-router/dev": "^7.7.1",