#585 create disabled option on rigth panel

src/pods/properties/components/disabled/disabled-selector.component.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.checkbox {
+  width: var(--space-md);
+  height: var(--space-md);
+  cursor: pointer;
+}

src/pods/properties/components/disabled/disabled-selector.component.tsx

@@ -0,0 +1,23 @@
+import classes from './disabled-selector.component.module.css';
+
+interface Props {
+  label: string;
+  disabled: boolean;
+  onChange: (disabled: boolean) => void;
+}
+
+export const Disabled: React.FC<Props> = props => {
+  const { label, disabled, onChange } = props;
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <input
+        type="checkbox"
+        checked={disabled}
+        onChange={() => onChange(!disabled)}
+        className={classes.checkbox}
+      />
+    </div>
+  );
+};

src/pods/properties/components/disabled/index.ts

@@ -0,0 +1 @@
+export * from './disabled-selector.component';

src/pods/properties/components/index.ts

@@ -4,3 +4,4 @@ export * from './color-picker';
 export * from './icon-selector';
 export * from './progress';
 export * from './border-radius';
+export * from './disabled';

src/pods/properties/properties.pod.tsx

@@ -3,7 +3,7 @@ import classes from './properties.pod.module.css';
 import { ZIndexOptions } from './components/zindex/zindex-option.component';
 import { ColorPicker } from './components/color-picker/color-picker.component';
 import { Checked } from './components/checked/checked.component';
-import { SelectSize, SelectIcon, BorderRadius } from './components';
+import { SelectSize, SelectIcon, BorderRadius, Disabled } from './components';
 import { StrokeStyle } from './components/stroke-style/stroke.style.component';
 import { ImageSrc } from './components/image-src/image-selector.component';
 import { ImageBlackAndWhite } from './components/image-black-and-white/image-black-and-white-selector.component';
@@ -224,6 +224,24 @@ export const PropertiesPod = () => {
             }
           />
         </ShowProp>
+        <ShowProp
+          singleSelection={isSingleSelection}
+          multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}
+          propKey="disabled"
+          propValue={selectedShapeData?.otherProps?.disabled}
+        >
+          <Disabled
+            label="Disabled"
+            disabled={selectedShapeData?.otherProps?.disabled ?? false}
+            onChange={Disabled =>
+              updateOtherPropsOnSelected(
+                'disabled',
+                Disabled,
+                isMultipleSelection
+              )
+            }
+          />
+        </ShowProp>
         <ShowProp
           singleSelection={isSingleSelection}
           multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}