feat: total services amount and recalculating

src/components/LockCheckbox/LockCheckbox.tsx

@@ -0,0 +1,34 @@
+import { ActionIcon, ActionIconVariant, CheckboxProps, Tooltip } from "@mantine/core";
+import { FC } from "react";
+import { IconLock, IconLockOpen } from "@tabler/icons-react";
+
+type RestProps = {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    variant: ActionIconVariant
+}
+type Props = Omit<CheckboxProps, "onChange" | "value" | "variant"> & RestProps;
+
+const LockCheckbox: FC<Props> = (props) => {
+    const { value = false } = props;
+    const getIcon = () => {
+        return value ? <IconLock /> : <IconLockOpen />;
+    };
+
+    const handleChange = () => {
+        if (props.onChange) {
+            props.onChange(!value);
+        }
+    };
+    return (
+        <Tooltip label={props.label}>
+            <ActionIcon
+                onClick={handleChange}
+                variant={props.variant}>
+                {getIcon()}
+            </ActionIcon>
+        </Tooltip>
+    );
+};
+
+export default LockCheckbox;