Ready to implement network routes contents

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -0,0 +1,55 @@
+import { Grid } from "@mui/material";
+import { NetworkInfo } from "../../api/NetworksApi";
+import { ServerApi } from "../../api/ServerApi";
+import { EditSection } from "../forms/EditSection";
+import { TextInput } from "../forms/TextInput";
+
+export function NetworkDetails(p: {
+  net: NetworkInfo;
+  editable: boolean;
+  onChange?: () => void;
+}): React.ReactElement {
+  return (
+    <Grid container spacing={2}>
+      {/* Metadata section */}
+      <EditSection title="Metadata">
+        <TextInput
+          label="Name"
+          editable={p.editable}
+          value={p.net.name}
+          onValueChange={(v) => {
+            p.net.name = v ?? "";
+            p.onChange?.();
+          }}
+          checkValue={(v) => /^[a-zA-Z0-9]+$/.test(v)}
+          size={ServerApi.Config.constraints.net_name_size}
+        />
+
+        <TextInput label="UUID" editable={false} value={p.net.uuid} />
+
+        <TextInput
+          label="Title"
+          editable={p.editable}
+          value={p.net.title}
+          onValueChange={(v) => {
+            p.net.title = v;
+            p.onChange?.();
+          }}
+          size={ServerApi.Config.constraints.net_title_size}
+        />
+
+        <TextInput
+          label="Description"
+          editable={p.editable}
+          value={p.net.description}
+          onValueChange={(v) => {
+            p.net.description = v;
+            p.onChange?.();
+          }}
+          multiline={true}
+        />
+      </EditSection>
+      TODO:continue
+    </Grid>
+  );
+}