first commit

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import InputRange from "../../../ui/inputs/InputRange";
+import InputToggle from "../../../ui/inputs/InputToggle";
+import { AI_Icon } from "../../../icons/ExportCommonIcons";
+import LabeledButton from "../../../ui/inputs/LabledButton";
+
+const GlobalProperties: React.FC = () => {
+  const [limitDistance, setLimitDistance] = useState(false);
+  const [distance, setDistance] = useState<number>(5);
+
+  const [limitGridDistance, setLimitGridDistance] = useState(false);
+  const [gridDistance, setGridDistance] = useState<number>(5);
+
+  function optimizeScene() {
+    setLimitDistance(true);
+    setDistance(5);
+  }
+
+  function updateDistance(value: number) {
+    setDistance(value);
+  }
+
+  function updateGridDistance(value: number) {
+    setGridDistance(value);
+  }
+
+  return (
+    <div className="global-properties-container">
+      <div className="header">Environment</div>
+      <div className="optimize-button" onClick={optimizeScene}>
+        <AI_Icon />
+        Optimize
+      </div>
+
+      <div className="split"></div>
+
+      <InputToggle inputKey="1" label="Roof Visibility" />
+      <InputToggle inputKey="2" label="Wall Visibility" />
+      <InputToggle inputKey="3" label="Shadows Visibility" />
+      <LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>
+
+      <div className="split"></div>
+
+      <InputToggle
+        inputKey="4"
+        label="Limit Render Distance"
+        value={limitDistance}
+        onClick={() => {
+          setLimitDistance(!limitDistance);
+        }}
+      />
+      <InputRange
+        label="Distance"
+        disabled={!limitDistance}
+        value={distance}
+        key={"5"}
+        onChange={(value: number) => updateDistance(value)}
+      />
+
+      <div className="split"></div>
+
+      <InputToggle
+        inputKey="6"
+        label="Display Grid"
+        value={limitGridDistance}
+        onClick={() => {
+          setLimitGridDistance(!limitGridDistance);
+        }}
+      />
+      <InputRange
+        label="Tile Distance"
+        disabled={!limitGridDistance}
+        value={gridDistance}
+        key={"7"}
+        onChange={(value: number) => updateGridDistance(value)}
+      />
+    </div>
+  );
+};
+
+export default GlobalProperties;