first commit

app/src/components/ui/componets/DisplayZone.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useRef } from "react";
+import { Widget } from "../../../store/useWidgetStore";
+
+// Define the type for `Side`
+type Side = "top" | "bottom" | "left" | "right";
+
+interface DisplayZoneProps {
+  zonesData: {
+    [key: string]: {
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: Widget[];
+    };
+  };
+  selectedZone: {
+    zoneName: string;
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    widgets: {
+      id: string;
+      type: string;
+      title: string;
+      panel: Side;
+      data: any;
+    }[];
+  };
+  setSelectedZone: React.Dispatch<
+    React.SetStateAction<{
+      zoneName: string;
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: {
+        id: string;
+        type: string;
+        title: string;
+        panel: Side;
+        data: any;
+      }[];
+    }>
+  >;
+}
+
+const DisplayZone: React.FC<DisplayZoneProps> = ({
+  zonesData,
+  selectedZone,
+  setSelectedZone,
+}) => {
+  // Ref for the container element
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // Example state for selectedOption and options (adjust based on your actual use case)
+  const [selectedOption, setSelectedOption] = React.useState<string | null>(
+    null
+  );
+  console.log('setSelectedOption: ', setSelectedOption);
+  const [options, setOptions] = React.useState<string[]>([]);
+  console.log('setOptions: ', setOptions);
+
+  // Scroll to the selected option when it changes
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (container && selectedOption) {
+      // Handle scrolling to the selected option
+      const index = options.findIndex((option) => {
+        const formattedOption = formatOptionName(option);
+        const selectedFormattedOption =
+          selectedOption?.split("_")[1] || selectedOption;
+        return formattedOption === selectedFormattedOption;
+      });
+
+      if (index !== -1) {
+        const optionElement = container.children[index] as HTMLElement;
+        if (optionElement) {
+          optionElement.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "center",
+          });
+        }
+      }
+    }
+  }, [selectedOption, options]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    const handleWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      if (container) {
+        container.scrollBy({
+          left: event.deltaY * 2, // Adjust the multiplier for faster scrolling
+          behavior: "smooth",
+        });
+      }
+    };
+
+    let isDragging = false;
+    let startX: number;
+    let scrollLeft: number;
+
+    const handleMouseDown = (event: MouseEvent) => {
+      isDragging = true;
+      startX = event.pageX - (container?.offsetLeft || 0);
+      scrollLeft = container?.scrollLeft || 0;
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!isDragging || !container) return;
+      event.preventDefault();
+      const x = event.pageX - (container.offsetLeft || 0);
+      const walk = (x - startX) * 2; // Adjust the multiplier for faster dragging
+      container.scrollLeft = scrollLeft - walk;
+    };
+
+    const handleMouseUp = () => {
+      isDragging = false;
+    };
+
+    const handleMouseLeave = () => {
+      isDragging = false;
+    };
+
+    if (container) {
+      container.addEventListener("wheel", handleWheel, { passive: false });
+      container.addEventListener("mousedown", handleMouseDown);
+      container.addEventListener("mousemove", handleMouseMove);
+      container.addEventListener("mouseup", handleMouseUp);
+      container.addEventListener("mouseleave", handleMouseLeave);
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener("wheel", handleWheel);
+        container.removeEventListener("mousedown", handleMouseDown);
+        container.removeEventListener("mousemove", handleMouseMove);
+        container.removeEventListener("mouseup", handleMouseUp);
+        container.removeEventListener("mouseleave", handleMouseLeave);
+      }
+    };
+  }, []);
+
+  // Helper function to format option names (customize as needed)
+  const formatOptionName = (option: string): string => {
+    // Replace underscores with spaces and capitalize the first letter
+    return option.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`zoon-wrapper ${
+        selectedZone.activeSides.includes("bottom") && "bottom"
+      }`}
+    >
+      {Object.keys(zonesData).map((zoneName, index) => (
+        <div
+          key={index}
+          className={`zone ${
+            selectedZone.zoneName === zoneName ? "active" : ""
+          }`}
+          onClick={() => {
+            setSelectedZone({
+              zoneName,
+              ...zonesData[zoneName],
+            });
+          }}
+        >
+          {zoneName}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DisplayZone;