+ {item.type === StageItemType.Text ? (
+ item.params.text < 5 ? (
+ item.params.text
+ ) : (
+ item.params.text?.substring(0, 5) + "..."
+ )
+ ) : (
+ 
+ )}
+ {item.type}
+
+ );
+}
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index 2e020da..93c4549 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -1,6 +1,7 @@
import { UserNav } from "./user-nav";
import Image from "next/image";
import logo from "@/assets/logo.png";
+import { Switch } from "@/components/ui/switch";
export const Navbar = () => {
return (
@@ -12,7 +13,7 @@ export const Navbar = () => {
alt="Logo"
layout="fill" // required
objectFit="cover" // change as you like
- className="rounded-full" // you can use other classes here too
+ className="rounded-full object-cover" // you can use other classes here too
/>
diff --git a/src/components/layout/sidebar/background-select.tsx b/src/components/layout/sidebar/background-select.tsx
index 83d1b52..a4de24d 100644
--- a/src/components/layout/sidebar/background-select.tsx
+++ b/src/components/layout/sidebar/background-select.tsx
@@ -8,12 +8,13 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { RxLayout } from "react-icons/rx";
import { Label } from "@/components/ui/label";
-import { useAppDispatch } from "@/hooks";
+import { useAppDispatch, useAppSelector } from "@/hooks";
import { selectBackground } from "@/store/app.slice";
export const BackgroundSelect = () => {
const dispatch = useAppDispatch();
const [open, setOpen] = useState(false);
+ const bgColor = useAppSelector((state) => state.app.background);
const handleBackgroundSelect = (color: string) => {
dispatch(selectBackground(color));
@@ -40,30 +41,17 @@ export const BackgroundSelect = () => {
-
diff --git a/src/components/layout/sidebar/layers.tsx b/src/components/layout/sidebar/layers.tsx
index d4520ef..073aa96 100644
--- a/src/components/layout/sidebar/layers.tsx
+++ b/src/components/layout/sidebar/layers.tsx
@@ -8,19 +8,26 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { RxStack } from "react-icons/rx";
import { useAppDispatch, useAppSelector } from "@/hooks";
-import { OrderDirection, updateItemOrder } from "@/store/app.slice";
+import { selectItem, setStageItems } from "@/store/app.slice";
+import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
+import {
+ arrayMove,
+ SortableContext,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import LayerItem from "@/components/layer-item";
export const Layers = () => {
const dispatch = useAppDispatch();
const items = useAppSelector((state) => state.app.items);
- const updateImageLayer = (id: string, direction: OrderDirection) => {
- dispatch(
- updateItemOrder({
- id,
- direction,
- }),
- );
+ const handleDragEnd = (e: DragEndEvent) => {
+ const { active, over } = e;
+ const oldIndex = items.findIndex((item) => item.id === active.id);
+ const newIndex = items.findIndex((item) => item.id === over?.id);
+ const result = arrayMove(items, oldIndex, newIndex);
+ dispatch(setStageItems(result));
+ dispatch(selectItem(active.id));
};
return (
@@ -33,26 +40,22 @@ export const Layers = () => {
- Layer
+ Layers
-
- {items.map((item) => (
-
+
+
+ {items.map((item) => (
+
+
diff --git a/src/components/layout/sidebar/legacy.tsx b/src/components/layout/sidebar/legacy.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layout/sidebar/select-template.tsx b/src/components/layout/sidebar/select-template.tsx
index 8450f67..a2563d8 100644
--- a/src/components/layout/sidebar/select-template.tsx
+++ b/src/components/layout/sidebar/select-template.tsx
@@ -1,33 +1,69 @@
-import React from "react";
+import React, { useState } from "react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
-import { PiFrameCornersDuotone } from "react-icons/pi";
-import { useAppDispatch } from "@/hooks";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAppDispatch } from "@/hooks";
+import { LuLayoutTemplate } from "react-icons/lu";
+import { ScrollArea } from "@/components/ui/scroll-area";
-export function SelectTemplate() {
+export const SelectTemplate = () => {
const dispatch = useAppDispatch();
+ const [open, setOpen] = useState(false);
+ const handleSizeSelect = () => {
+ setOpen(false);
+ };
return (
-
+
-
-
- {/**/}
-
-
-
- Cadre
+
+
+
+ Template
+
+
+
);
-}
+};
diff --git a/src/components/layout/sidebar/sidebar.tsx b/src/components/layout/sidebar/sidebar.tsx
index 8028029..c0ea5d0 100644
--- a/src/components/layout/sidebar/sidebar.tsx
+++ b/src/components/layout/sidebar/sidebar.tsx
@@ -3,6 +3,8 @@ import ImageInput from "@/components/layout/sidebar/image-input";
import SizeSelect from "@/components/layout/sidebar/size-select";
import { BackgroundSelect } from "@/components/layout/sidebar/background-select";
import { Layers } from "@/components/layout/sidebar/layers";
+import { SelectTemplate } from "@/components/layout/sidebar/select-template";
+import { Switch } from "@/components/ui/switch";
export function Sidebar() {
return (
@@ -10,7 +12,7 @@ export function Sidebar() {
diff --git a/src/components/layout/sidebar/size-select.tsx b/src/components/layout/sidebar/size-select.tsx
index 02ef73d..65c828a 100644
--- a/src/components/layout/sidebar/size-select.tsx
+++ b/src/components/layout/sidebar/size-select.tsx
@@ -42,13 +42,13 @@ const SizeSelect = () => {
-
- handleBackgroundSelect("red")}
- >
- Red
-
-
-
-
- {item.id}
-
-
-
- ))}
+
+
+
+ Image
+
+
+ Image
+
{" "}
+
+ Image
+
{" "}
+
+ Image
+
{" "}
+
+ Image
+
{" "}
+
+ Image
+
{" "}
+
+ Image
+
{" "}
+
+ Image
+
+
-
diff --git a/src/components/legales.tsx b/src/components/legales.tsx
new file mode 100644
index 0000000..a6233b4
--- /dev/null
+++ b/src/components/legales.tsx
@@ -0,0 +1,20 @@
+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 (
+
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes