feat: docker usage examples & statfs

apps/client/app/modules/details/components/healthchecks-card.tsx

@@ -1,12 +1,12 @@
 import { formatDistanceToNow } from "date-fns";
 import { ScanHeartIcon } from "lucide-react";
-import type { GetVolumeResponse } from "~/api-client";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 import { Switch } from "~/components/ui/switch";
+import type { Volume } from "~/lib/types";
 
 type Props = {
-	volume: GetVolumeResponse;
+	volume: Volume;
 };
 
 export const HealthchecksCard = ({ volume }: Props) => {
@@ -28,7 +28,7 @@ export const HealthchecksCard = ({ volume }: Props) => {
 				)}
 				<span className="flex items-center gap-2">
 					Remount on error
-					<Switch className="ml-auto cursor-pointer" checked={volume.autoRemount} />
+					<Switch className="ml-auto cursor-pointer" checked={Boolean(volume.autoRemount)} />
 				</span>
 			</div>
 			<Button variant="outline">Run Health Check</Button>

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

@@ -1,9 +1,7 @@
 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";
+import { CodeBlock } from "~/components/ui/code-block";
 
 type Props = {
 	volume: Volume;
@@ -27,23 +25,16 @@ export const DockerTabContent = ({ 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">
-				<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">
+				<div className="text-sm text-muted-foreground">
 					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>
+				<CodeBlock code={yamlString} language="yaml" filename="docker-compose.yml" />
+				<div className="text-sm text-muted-foreground">
+					Alternatively, you can use the following command to run a Docker container with the volume mounted:
+				</div>
+				<CodeBlock code={`docker run -v ${volume.name}:/path/in/container nginx:latest`} />
 			</Card>
 		</div>
 	);

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

@@ -1,13 +1,15 @@
 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";
+import type { StatFs, Volume } from "~/lib/types";
+import { ByteSize } from "~/components/bytes-size";
 
 type Props = {
 	volume: Volume;
+	statfs: StatFs;
 };
 
-export const VolumeInfoTabContent = ({ volume }: Props) => {
+export const VolumeInfoTabContent = ({ volume, statfs }: 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">
@@ -16,6 +18,11 @@ export const VolumeInfoTabContent = ({ volume }: Props) => {
 			<HealthchecksCard volume={volume} />
 			<Card className="p-6 h-full">
 				<h2 className="text-lg font-medium">Volume Information</h2>
+				Total: <ByteSize bytes={statfs.total} />
+				<br />
+				Free: <ByteSize bytes={statfs.free} />
+				<br />
+				Used: <ByteSize bytes={statfs.used} />
 			</Card>
 		</div>
 	);