From f2be93951f17f2b385d5e5daa224582a95da804c Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Wed, 27 Jul 2022 16:24:55 +0530
Subject: [PATCH] feat(frontend): implemented labels form for network modal

---
 .../src/components/Modal/network/Labels.tsx   | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/Labels.tsx b/services/frontend/src/components/Modal/network/Labels.tsx
index 12d9e27..55479ed 100644
--- a/services/frontend/src/components/Modal/network/Labels.tsx
+++ b/services/frontend/src/components/Modal/network/Labels.tsx
@@ -1,5 +1,39 @@
-const Labels = () => {
-  return <></>;
+import { styled } from "@mui/joy";
+import { FunctionComponent, ReactElement } from "react";
+import Records from "../../Records";
+
+const Root = styled("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Labels: FunctionComponent = (): ReactElement => {
+  return (
+    <Root>
+      <Records
+        name="labels"
+        modal="network"
+        title="Labels"
+        referred="label"
+        fields={(index: number) => [
+          {
+            name: `labels[${index}].key`,
+            placeholder: "Key",
+            required: true,
+            type: "text"
+          },
+          {
+            name: `labels[${index}].value`,
+            placeholder: "Value",
+            required: true,
+            type: "text"
+          }
+        ]}
+        newValue={{ key: "", value: "" }}
+      />
+    </Root>
+  );
 };
 
 export default Labels;