add: created components for rules visualization

frontend/src/components/Firewall/ModeSelector.tsx

@@ -0,0 +1,20 @@
+import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
+import { RuleMode } from "./utils";
+
+
+
+export const ModeSelector = (props:Omit<SegmentedControlProps, "data">) => (
+    <SegmentedControl
+        data={[
+            {
+                value: RuleMode.IN,
+                label: 'IN',
+            },
+            {
+                value: RuleMode.OUT,
+                label: 'OUT',
+            }
+        ]}
+        {...props}
+    />
+)