canvas_frontend_dev/src/components/Panel/TopBar.jsx

import { useContext, useRef, useState } from "react";
import TextCustomization from "../EachComponent/Customization/TextCustomization";
import LockObject from "../EachComponent/Customization/LockObject";
import OpacityCustomization from "../EachComponent/Customization/OpacityCustomization";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import { ObjectShortcut } from "../ObjectShortcut";
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
import { Button } from "../ui/button";
import { ImagePlus, ChevronLeft, ChevronRight } 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;
  // w - [calc(100 % -80px)] h - full
  return (
    <div className="w-full h-full overflow-x-scroll p-1">
      <div className="flex item-center justify-center w-fit mx-auto">
        <div className="bg-white mx-auto flex justify-center items-center gap-2">
          <div className="flex-1">
            <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>

            {/* Canvas settings */}
            <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>
              <Tooltip id="canvas" content="Canvas Settings" place="bottom" />
            </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>
                )}
              <Tooltip id="color-gr" content="Color" place="bottom" />

              {!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>
              )}
              <Tooltip id="stroke" content="Stroke" place="bottom" />

              {(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>
              )}
              <Tooltip id="group-obj" content="Group Object" place="bottom" />
            </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>

              <Tooltip id="flip" content="Object flip" place="bottom" />
              {activeObject?.type !== "group" && (
                <a data-tooltip-id="position">
                  <Button variant="ghost" size="icon" onClick={() => setSelectedPanel("position")}>
                    <SlTarget />
                  </Button>
                </a>
              )}

              <Tooltip id="position" content="Object position" place="bottom" />
              <a data-tooltip-id="shadow">
                <Button variant="ghost" size="icon" onClick={() => setSelectedPanel("shadow")}>
                  <RiShadowLine />
                </Button>
              </a>
              <Tooltip id="shadow" content="Shadow color" place="bottom" />
            </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>
      </div>
    </div>
  );
}