refactor: Split BlockGroupField as a file

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>
-  );
-};

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>
+  );
+};

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";

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";