From 86ac60477f8108d120a866ff3f68305dece894d1 Mon Sep 17 00:00:00 2001
From: miyanokomiya <tomoya.hstexze24632@gmail.com>
Date: Tue, 24 Sep 2024 19:59:54 +0900
Subject: [PATCH] refactor: Split BlockGroupField as a file

---
 src/components/atoms/BlockField.tsx                 |  9 ---------
 src/components/atoms/BlockGroupField.tsx            | 13 +++++++++++++
 .../shapeInspectorPanel/ClipInspector.tsx           |  2 +-
 .../GroupConstraintInspector.tsx                    |  3 ++-
 4 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 src/components/atoms/BlockGroupField.tsx

diff --git a/src/components/atoms/BlockField.tsx b/src/components/atoms/BlockField.tsx
index c132a6a8..0069281a 100644
--- a/src/components/atoms/BlockField.tsx
+++ b/src/components/atoms/BlockField.tsx
@@ -11,12 +11,3 @@ export const BlockField: React.FC<Props> = ({ label, children }) => {
     </div>
   );
 };
-
-export const BlockGroupField: React.FC<Props> = ({ label, children }) => {
-  return (
-    <div className="flex flex-col gap-1">
-      <span>{label}:</span>
-      <div className="ml-2 pl-2 border-l border-gray-400 flex flex-col gap-1">{children}</div>
-    </div>
-  );
-};
diff --git a/src/components/atoms/BlockGroupField.tsx b/src/components/atoms/BlockGroupField.tsx
new file mode 100644
index 00000000..a1359c2b
--- /dev/null
+++ b/src/components/atoms/BlockGroupField.tsx
@@ -0,0 +1,13 @@
+interface Props {
+  label: string;
+  children?: React.ReactNode;
+}
+
+export const BlockGroupField: React.FC<Props> = ({ label, children }) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <span>{label}:</span>
+      <div className="ml-2 pl-2 border-l border-gray-400 flex flex-col gap-1">{children}</div>
+    </div>
+  );
+};
diff --git a/src/components/shapeInspectorPanel/ClipInspector.tsx b/src/components/shapeInspectorPanel/ClipInspector.tsx
index 9176c6b9..4f4c49f0 100644
--- a/src/components/shapeInspectorPanel/ClipInspector.tsx
+++ b/src/components/shapeInspectorPanel/ClipInspector.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { ClipRule, Shape } from "../../models";
-import { BlockGroupField } from "../atoms/BlockField";
+import { BlockGroupField } from "../atoms/BlockGroupField";
 import iconClipIn from "../../assets/icons/clip_rule_in.svg";
 import iconClipOut from "../../assets/icons/clip_rule_out.svg";
 import { GroupShape, isGroupShape } from "../../shapes/group";
diff --git a/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx b/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx
index 311add7a..9cc373c1 100644
--- a/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx
+++ b/src/components/shapeInspectorPanel/GroupConstraintInspector.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { GroupConstraint, Shape } from "../../models";
-import { BlockField, BlockGroupField } from "../atoms/BlockField";
+import { BlockField } from "../atoms/BlockField";
+import { BlockGroupField } from "../atoms/BlockGroupField";
 import gcIcon0 from "../../assets/icons/group_constraints_0.svg";
 import gcIcon1 from "../../assets/icons/group_constraints_1.svg";
 import gcIcon2 from "../../assets/icons/group_constraints_2.svg";