Started layer block function

Started legacy function

src/components/canvas.tsx

@@ -14,6 +14,7 @@ import { Toolbar } from "@/components/toolbar";
 import TransformableText from "@/components/transformable-text";
 import LayerBorder from "@/components/layer-border";
 import { CANVAS_PADDING_X, CANVAS_PADDING_Y } from "@/consts/canvas-params";
+import Legacy from "@/components/layout/sidebar/legacy";
 
 const Canvas = () => {
   const dispatch = useAppDispatch();
@@ -129,7 +130,7 @@ const Canvas = () => {
               }
             })}
           </Layer>
-          {/*<Legales />*/}
+          <Legacy stageParams={stage} />
 
           <LayerBorder />
         </Stage>

src/components/layer-item.tsx

@@ -3,6 +3,8 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { type StageItem, StageItemType } from "@/store/app.slice";
 import { useAppDispatch } from "@/hooks";
+import { Button } from "@/components/ui/button";
+import { HiOutlineLockClosed, HiOutlineLockOpen } from "react-icons/hi2";
 
 export default function LayerItem({ item }: { item: StageItem }) {
   const dispatch = useAppDispatch();
@@ -23,6 +25,8 @@ export default function LayerItem({ item }: { item: StageItem }) {
       {...listeners}
       className="m-2 flex items-center justify-between rounded-md border p-2 text-black"
     >
+      <span className="">{item.type}</span>
+
       {item.type === StageItemType.Text ? (
         item.params.text < 5 ? (
           item.params.text
@@ -36,7 +40,10 @@ export default function LayerItem({ item }: { item: StageItem }) {
           src={item.params.imageUrl}
         />
       )}
-      <span className="">{item.type}</span>
+      <Button>
+        <HiOutlineLockClosed />
+        <HiOutlineLockOpen />
+      </Button>
     </div>
   );
 }

src/components/layout/sidebar/legacy.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Layer, Text } from "react-konva";
+
+export default function Legacy({ stageParams }) {
+  return (
+    <Layer>
+      <Text
+        x={stageParams.width / 2 - 70}
+        y={50}
+        text="CHAMPAGNE"
+        fontSize={24}
+      />
+      <Text x={35} y={stageParams.height - 50} text="12% Vol." fontSize={14} />
+      <Text
+        x={stageParams.width / 2 - 10}
+        y={stageParams.height - 70}
+        text="BRUT"
+        fontSize={18}
+      />
+      <Text
+        x={stageParams.width - 75}
+        y={stageParams.height - 50}
+        text="750ml"
+        fontSize={14}
+      />
+      {/*<Image image={} x={stageParams.width - 75} y={stageParams.height - 50} />*/}
+    </Layer>
+  );
+}

src/components/legales.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Image, Layer } from "react-konva";
-import women from "../assets/logo.png";
-import useImage from "use-image";
-
-export default function Legales() {
-  const [test] = useImage(women);
-  return (
-    <Layer>
-      <Image
-        width={100}
-        height={100}
-        x={200}
-        y={200}
-        alt={women}
-        image={test}
-      />
-    </Layer>
-  );
-}

todo.md

@@ -9,4 +9,12 @@
 - Template properties ( assets )
 - Canvas sizes
 - what to add or change?
-- 
+
+
+
+
+todo with Andrei 
+
+- lines in canvas with css 
+- error correction
+- questions about legacy type