canvas-backend/src/components/Panel/TopBar.jsx

import TextCustomization from "../EachComponent/Customization/TextCustomization";
import LockObject from "../EachComponent/Customization/LockObject";
import { ScrollArea, ScrollBar } from "../ui/scroll-area";
import OpacityCustomization from "../EachComponent/Customization/OpacityCustomization";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import { useContext } from "react";
import { ObjectShortcut } from "../ObjectShortcut";
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
import { Button } from "../ui/button";
import { ImagePlus } from "lucide-react";
import { RxBorderWidth } from "react-icons/rx";
import { LuFlipVertical } from "react-icons/lu";
import { SlTarget } from "react-icons/sl";
import { RiShadowLine } from "react-icons/ri";
import { FaRegObjectGroup } from "react-icons/fa";
import { Tooltip } from "react-tooltip";

export function TopBar() {
  const { activeObject } = useContext(ActiveObjectContext);
  const { selectedPanel, setSelectedPanel, textColor } =
    useContext(CanvasContext);
  const activeObjectType = activeObject?.type;
  const hasClipPath = !!activeObject?.clipPath;
  const customClipPath = activeObject?.isClipPath;
  return (
    <div>
      <ScrollArea
        className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
          selectedPanel !== ""
            ? "w-[500px] lg:w-[700px] xl:w-[900px] xl:left-[25%] 2xl:left-[50%]"
            : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
        }   `}
      >
        <div className="bg-white shadow-sm mx-auto px-4 py-2 flex justify-center items-center gap-2">
          <div>
            <TextCustomization />
          </div>
          <div className="flex items-center gap-4 px-2">
            <Button
              variant="outline"
              className="flex items-center gap-2 border-dashed border-2 rounded-md hover:bg-gray-50"
              onClick={() => setSelectedPanel("image-insert")}
            >
              <ImagePlus className="w-5 h-5" />
              <span>Add image</span>
            </Button>

            <div>
              <a data-tooltip-id="canvas">
                <Button
                  variant="ghost"
                  size="icon"
                  className="w-10 h-10"
                  onClick={() => setSelectedPanel("canvas")}
                >
                  <svg
                    width="100"
                    height="100"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      x="3"
                      y="5"
                      width="18"
                      height="12"
                      stroke="black"
                      strokeWidth="2"
                      fill="none"
                    />

                    <path d="M14 14 L19 19" stroke="black" strokeWidth="2" />
                    <path
                      d="M15 15 Q16 12, 19 11"
                      stroke="black"
                      strokeWidth="2"
                      fill="none"
                    />

                    <line
                      x1="3"
                      y1="17"
                      x2="7"
                      y2="21"
                      stroke="black"
                      strokeWidth="2"
                    />
                    <line
                      x1="21"
                      y1="17"
                      x2="17"
                      y2="21"
                      stroke="black"
                      strokeWidth="2"
                    />
                  </svg>
                </Button>
              </a>
            </div>

            <div className="flex items-center gap-2">
              {activeObjectType !== "image" &&
                activeObject?.type !== "i-text" &&
                !hasClipPath &&
                !customClipPath && (
                  <a data-tooltip-id="color-gr">
                    <Button
                      variant="ghost"
                      size="icon"
                      className={"rounded-full"}
                      onClick={() => setSelectedPanel("color")}
                      style={{ backgroundColor: textColor?.fill || "black" }}
                    ></Button>
                  </a>
                )}

              {!customClipPath && (
                <a data-tooltip-id="stroke">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="w-10 h-10"
                    onClick={() => setSelectedPanel("stroke")}
                  >
                    <RxBorderWidth className="text-lg" />
                  </Button>
                </a>
              )}
              {(activeObject || activeObject.type === "group") && (
                <a data-tooltip-id="group-obj">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="w-10 h-10"
                    onClick={() => setSelectedPanel("group-obj")}
                  >
                    <FaRegObjectGroup />
                  </Button>
                </a>
              )}
            </div>

            <div className="h-6 w-px bg-gray-200" />

            <div className="flex items-center gap-2">
              <a data-tooltip-id="flip">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSelectedPanel("flip")}
                >
                  <LuFlipVertical />
                </Button>
              </a>

              {activeObject?.type !== "group" && (
                <a data-tooltip-id="position">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setSelectedPanel("position")}
                  >
                    <SlTarget />
                  </Button>
                </a>
              )}
              <a data-tooltip-id="shadow">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSelectedPanel("shadow")}
                >
                  <RiShadowLine />
                </Button>
              </a>
            </div>
          </div>
          <OpacityCustomization />
          <div className="h-4 w-px bg-border mx-2" />

          <div>
            <ObjectShortcut value={"default"} />
          </div>
          <div className="ml-4">
            <LockObject />
          </div>
        </div>
        <ScrollBar orientation="horizontal" />
      </ScrollArea>

      <Tooltip id="color-gr" content="Color" place="bottom" />
      <Tooltip id="stroke" content="Stroke" place="bottom" />
      <Tooltip id="position" content="Object position" place="bottom" />
      <Tooltip id="shadow" content="Shadow color" place="bottom" />
      <Tooltip id="flip" content="Object flip" place="bottom" />
      <Tooltip id="group-obj" content="Group Object" place="bottom" />
      <Tooltip id="canvas" content="Canvas Settings" place="bottom" />
    </div>
  );
}