tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/web/app/hooks/useVolumes.ts b/web/app/hooks/useVolumes.ts
new file mode 100644
index 0000000..b05a32f
--- /dev/null
+++ b/web/app/hooks/useVolumes.ts
@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+import { type } from "arktype";
+
+const volumesSchema = type({
+ volumes: type({
+ created_at: "string",
+ mountpoint: "string",
+ name: "string",
+ }).array(),
+});
+
+const getVolumes = async () => {
+ const response = await fetch("/api/volumes");
+ if (!response.ok) {
+ throw new Error("Network response was not ok");
+ }
+ return response.json();
+};
+
+export const useVolumes = () => {
+ const query = useQuery({
+ queryKey: ["volumes"],
+ queryFn: getVolumes,
+ select: (data) => {
+ const result = volumesSchema(data);
+
+ if (result instanceof type.errors) {
+ console.error("Volumes data validation failed:", result);
+ return { volumes: [] };
+ }
+
+ return result;
+ },
+ });
+
+ return query;
+};
diff --git a/web/app/lib/utils.ts b/web/app/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/web/app/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/web/app/root.tsx b/web/app/root.tsx
new file mode 100644
index 0000000..5b88c84
--- /dev/null
+++ b/web/app/root.tsx
@@ -0,0 +1,80 @@
+import {
+ isRouteErrorResponse,
+ Links,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from "react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import type { Route } from "./+types/root";
+import "./app.css";
+
+export const links: Route.LinksFunction = () => [
+ { rel: "preconnect", href: "https://fonts.googleapis.com" },
+ {
+ rel: "preconnect",
+ href: "https://fonts.gstatic.com",
+ crossOrigin: "anonymous",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap",
+ },
+];
+
+const queryClient = new QueryClient();
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
+export default function App() {
+ return ;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = "Oops!";
+ let details = "An unexpected error occurred.";
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? "404" : "Error";
+ details =
+ error.status === 404
+ ? "The requested page could not be found."
+ : error.statusText || details;
+ } else if (import.meta.env.DEV && error && error instanceof Error) {
+ details = error.message;
+ stack = error.stack;
+ }
+
+ return (
+
+ {message}
+ {details}
+ {stack && (
+
+ {stack}
+
+ )}
+
+ );
+}
diff --git a/web/app/routes.ts b/web/app/routes.ts
new file mode 100644
index 0000000..102b402
--- /dev/null
+++ b/web/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes";
+
+export default [index("routes/home.tsx")] satisfies RouteConfig;
diff --git a/web/app/routes/home.tsx b/web/app/routes/home.tsx
new file mode 100644
index 0000000..1b3889f
--- /dev/null
+++ b/web/app/routes/home.tsx
@@ -0,0 +1,13 @@
+import type { Route } from "./+types/home";
+import { Welcome } from "../welcome/welcome";
+
+export function meta({}: Route.MetaArgs) {
+ return [
+ { title: "Ironmount" },
+ { name: "description", content: "Welcome to React Router!" },
+ ];
+}
+
+export default function Home() {
+ return ;
+}
diff --git a/web/app/welcome/logo-dark.svg b/web/app/welcome/logo-dark.svg
new file mode 100644
index 0000000..dd82028
--- /dev/null
+++ b/web/app/welcome/logo-dark.svg
@@ -0,0 +1,23 @@
+
diff --git a/web/app/welcome/logo-light.svg b/web/app/welcome/logo-light.svg
new file mode 100644
index 0000000..7328492
--- /dev/null
+++ b/web/app/welcome/logo-light.svg
@@ -0,0 +1,23 @@
+
diff --git a/web/app/welcome/welcome.tsx b/web/app/welcome/welcome.tsx
new file mode 100644
index 0000000..ceccdef
--- /dev/null
+++ b/web/app/welcome/welcome.tsx
@@ -0,0 +1,107 @@
+import { AArrowDownIcon, Folder } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { Card } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "~/components/ui/select";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "~/components/ui/table";
+import { useVolumes } from "~/hooks/useVolumes";
+import { cn } from "~/lib/utils";
+
+export function Welcome() {
+ const { data } = useVolumes();
+
+ console.log(data?.volumes.map((volume) => volume.name));
+
+ return (
+
+
+
+ Volume Manager
+
+ Manage your Docker volume configurations and monitor their status.
+
+
+
+
+
+
+
+ A list of your managed Docker volumes.
+
+
+ Name
+ Backend
+ Mountpoint
+ Status
+ Actions
+
+
+
+ {data?.volumes.map((volume) => (
+
+ {volume.name}
+
+
+
+ Dir
+
+
+ {volume.mountpoint}
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ |