first commit

app/src/components/layout/sidebarRight/visualization/Visualization.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import ToggleHeader from "../../../ui/inputs/ToggleHeader";
+import Data from "./data/Data";
+import Design from "./design/Design";
+
+const Visualization = () => {
+  const [activeOption, setActiveOption] = useState("Data");
+
+  const handleToggleClick = (option: string) => {
+    setActiveOption(option); // Update the active option
+  };
+
+  return (
+    <div className="visualization-right-sideBar">
+      <ToggleHeader
+        options={["Data", "Design"]}
+        activeOption={activeOption}
+        handleClick={handleToggleClick}
+      />
+      <div className="sidebar-right-content-container">
+        {activeOption === "Data" ? <Data /> : <Design />}
+      </div>
+    </div>
+  );
+};
+
+export default Visualization;