zone properties updated

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

@@ -1,15 +1,37 @@
-import React from "react";
+import React, { useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 
-const ZoneProperties = () => {
+const ZoneProperties: React.FC = () => {
+  const [Edit, setEdit] = useState(false);
+
+  function handleSetView() {
+    setEdit(false);
+  }
+
+  function handleEditView() {
+    if (Edit) {
+      setEdit(false);
+    } else {
+      setEdit(true);
+    }
+  }
+
   return (
     <div className="zone-properties-container">
       <div className="header">
         <RenameInput value="Selected Zone Name" />
+        <div className="button" onClick={handleEditView}>
+          {Edit ? "Cancel" : "Edit"}
+        </div>
       </div>
-      <Vector3Input onChange={()=>{}} header="Target"/>
-      <Vector3Input onChange={()=>{}} header="Position"/>
+      <Vector3Input onChange={() => {}} header="Viewport Target" />
+      <Vector3Input onChange={() => {}} header="Viewport Position" />
+      {Edit && (
+        <div className="button-save" onClick={handleSetView}>
+          Set View
+        </div>
+      )}
     </div>
   );
 };