bsign-customization-full 0.0.1

package/src/components/cart-panel.tsx

@@ -0,0 +1,170 @@
+import { ChevronDown, ChevronUp, Edit, Trash, X } from "lucide-react";
+import { useCartStore } from "../store/cart-store";
+import { Button } from "./ui/button";
+import { INITIAL_STATE, useLayersStore, type TLayersOption } from "../store/layers-store";
+import type { LayrProps, TLayer } from "./preview";
+import { createTemplateLayers, getDefaultTemplateOptions } from "../lib/config";
+import { ButtonGroup } from "./ui/button-group";
+import { useIsMobile } from "../hooks/use-mobile";
+import { useState } from "react";
+
+export default function CartPanel({ setConstructureSelectedItem }: {
+    setConstructureSelectedItem: (item: string) => void;
+}) {
+    const { cart, init: setCart } = useCartStore()
+    const { init: setSign, setCartId, editOptions, clearAll, cartId } = useLayersStore();
+    const isMobile = useIsMobile();
+    const [mobileCartOpen, setMobileCartOpen] = useState(false);
+
+    const handleRemoveFromCart = (id: number) => {
+        const filtered = cart.filter(item => item.id !== id);
+        setCart(filtered);
+        if (filtered.length <= 0) {
+            const defaults = getDefaultTemplateOptions();
+            clearAll({
+                ...INITIAL_STATE,
+                layers: createTemplateLayers({
+                    templateId: defaults.selectedTemplateId,
+                    shapeId: defaults.selectedShapeId,
+                    materialId: defaults.selectedMaterialId,
+                    preferredSizeId: defaults.selectedSize.id,
+                }),
+            });
+            setCartId(undefined);
+        }
+    }
+
+    const handleChangeCurrentItem = (id: number, layers: TLayer<LayrProps>[], itemOptions: TLayersOption) => {
+        clearAll();
+        setSign(layers);
+        editOptions(itemOptions)
+        setCartId(id);
+        setConstructureSelectedItem('text')
+    }
+
+    return cart.length > 0 ? (
+        <>
+            {isMobile ? (
+                <>
+                    {!mobileCartOpen && (
+                        <div className="fixed right-4 bottom-[calc(10rem+env(safe-area-inset-bottom))] z-[130]">
+                            <Button
+                                variant="default"
+                                size="sm"
+                                className="rounded-full px-4 shadow-lg"
+                                onClick={() => setMobileCartOpen(true)}
+                            >
+                                <ChevronUp className="size-4.5" />
+                                {`Added signs (${cart.length})`}
+                            </Button>
+                        </div>
+                    )}
+
+                    {mobileCartOpen && (
+                        <>
+                            <button
+                                type="button"
+                                className="fixed inset-0 z-[120] bg-black/30"
+                                onClick={() => setMobileCartOpen(false)}
+                                aria-label="Close added signs panel"
+                            />
+                            <div className="fixed inset-x-0 bottom-0 z-[130] border-t border-[#D6D6D6] bg-white px-3 pt-2 pb-[calc(0.5rem+env(safe-area-inset-bottom))] shadow-[0_-12px_30px_rgba(0,0,0,0.2)]">
+                                <div className="mb-2 flex items-center justify-between">
+                                    <p className="text-sm font-semibold">{`Added signs (${cart.length})`}</p>
+                                    <div className="flex items-center gap-1">
+                                        <Button
+                                            variant="ghost"
+                                            size="icon-sm"
+                                            className="rounded-full"
+                                            onClick={() => setMobileCartOpen(false)}
+                                        >
+                                            <ChevronDown className="size-4" />
+                                        </Button>
+                                        <Button
+                                            variant="ghost"
+                                            size="icon-sm"
+                                            className="rounded-full"
+                                            onClick={() => setMobileCartOpen(false)}
+                                        >
+                                            <X className="size-4" />
+                                        </Button>
+                                    </div>
+                                </div>
+
+                                <div className="no-scrollbar flex w-full gap-2 overflow-x-auto pb-1">
+                                    {cart.map(item => (
+                                        <div key={item.id} className={`relative shrink-0 flex flex-col gap-0.5 border px-3 py-2 ${item.id === cartId ? 'border-[#107E12]' : 'border-[#D6D6D6]'}`}>
+
+                                            {item.qty > 1 && <p className="text-xs bottom-0 right-0 absolute px-[7px]">{item.qty}</p>}
+
+                                            <img
+                                                src={item.img}
+                                                alt="Cart item"
+                                                className="h-16 w-16 rounded-md object-cover"
+                                            />
+                                            <div className="absolute top-0 right-0">
+                                                <ButtonGroup>
+                                                    <Button variant={"ghost"} size={"icon-sm"} onClick={() => handleChangeCurrentItem(item.id, item.sign, item.options)}><Edit /></Button>
+                                                    <Button
+                                                        variant={"ghost"}
+                                                        size={"icon-sm"}
+                                                        className="hover:bg-red-700 rounded-r-none group"
+                                                        onClick={() => handleRemoveFromCart(item.id)}
+                                                    >
+                                                        <Trash className="group-hover:text-white transition" />
+                                                    </Button>
+                                                </ButtonGroup>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </>
+            ) : (
+                <div className="no-scrollbar flex w-full overflow-x-auto border-t border-[#D6D6D6] p-3 md:h-full md:min-h-0 md:w-auto md:self-stretch md:flex-col md:items-center md:overflow-y-auto md:overflow-x-hidden md:border-t-0 md:p-0">
+                    {cart.map(item => (
+                        <div key={item.id} className={`relative shrink-0 flex flex-col gap-0.5 border border-r-0 px-3 py-2 md:px-6 md:py-[14px] ${item.id === cartId ? 'border-[#107E12]' : 'border-[#D6D6D6]'}`}>
+                            {/* {item.id === cartId && <p className="text-xs bottom-0 left-0 absolute px-[2px]">You're editing</p>} */}
+                            <p className="text-sm bottom-0 right-0 absolute px-[7px] w-full flex justify-between">
+                                <span className="text-[#8F8F8F]">Quantuty</span>
+
+                                <span className="font-semibold">{item.qty}</span>
+                            </p>
+
+                            <img
+                                src={item.img}
+                                alt="Cart item"
+                                className="h-16 w-16 rounded-md object-contain md:h-[85px] md:w-[85px]"
+                            />
+                            <div className="absolute top-0 right-0">
+                                <ButtonGroup>
+                                    <Button variant={"ghost"} size={"icon-sm"} onClick={() => handleChangeCurrentItem(item.id, item.sign, item.options)}><Edit /></Button>
+                                    <Button
+                                        variant={"ghost"}
+                                        size={"icon-sm"}
+                                        className="hover:bg-red-700 rounded-r-none group"
+                                        onClick={() => handleRemoveFromCart(item.id)}
+                                    >
+                                        <Trash className="group-hover:text-white transition" />
+                                    </Button>
+                                </ButtonGroup>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            <style>{`
+                .no-scrollbar::-webkit-scrollbar {
+                    display: none;
+                }
+                .no-scrollbar {
+                    -ms-overflow-style: none;  /* IE and Edge */
+                    scrollbar-width: none;  /* Firefox */
+                }
+            `}</style>
+        </>
+    ) : null
+}

package/src/components/cart-preview.tsx

@@ -0,0 +1,356 @@
+import { useMemo, useState, type ReactNode } from "react"
+import axios from "axios"
+import { Download, Edit3, Minus, Plus, ShoppingCart, Trash2, X } from "lucide-react"
+
+import {
+    createTemplateLayers,
+    getDefaultTemplateOptions,
+    getTemplateById,
+    getTemplateMaterial,
+    prodApiUrl,
+} from "../lib/config"
+import { CURRENCY_SYMBOL, formatPrice, getCartSummary, getUnitPrice } from "../lib/pricing"
+import { INITIAL_STATE, useLayersStore } from "../store/layers-store"
+import { useCartStore, type TCartItem } from "../store/cart-store"
+import type { LayerTextProps } from "./layers/text-layer"
+import type { TLayer } from "./preview"
+import { Button } from "./ui/button"
+import { downloadCartProposalPdf } from "../lib/cart-proposal-pdf"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "./ui/dialog"
+import { Progress } from "./ui/progress"
+import { ScrollArea } from "./ui/scroll-area"
+import { Spinner } from "./ui/spinner"
+
+const apiUrl = typeof import.meta.env.VITE_API_URL === "string" && import.meta.env.VITE_API_URL.trim() !== "" ? import.meta.env.VITE_API_URL : prodApiUrl
+
+const normalizeQty = (qty: number): number => {
+    return Number.isFinite(qty) && qty > 0 ? Math.floor(qty) : 1
+}
+
+const formatSizeNumber = (value: number): string => {
+    return Number.isInteger(value) ? String(value) : value.toFixed(1).replace(/\.0$/, "")
+}
+
+const formatLinePrice = (value: number): string => {
+    return `${CURRENCY_SYMBOL}${Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2)}`
+}
+
+const getColorLabel = (item: TCartItem): string => {
+    const template = getTemplateById(item.options.selectedTemplateId)
+    const material = getTemplateMaterial({
+        template,
+        materialId: item.options.selectedMaterialId,
+    })
+
+    return material.label
+}
+
+const getPersonalizationLines = (item: TCartItem): string[] => {
+    const textLayers = item.sign.filter((layer) => layer.type === "text" && layer.subtype !== "braille") as TLayer<LayerTextProps>[]
+    const lines = textLayers
+        .map((layer) => layer.props.text.trim())
+        .filter(Boolean)
+    return lines.length > 0 ? lines : ["-"]
+}
+
+
+const hasAdaFont = (item: TCartItem): boolean => {
+    const textLayers = item.sign.filter((layer) => layer.type === "text" && layer.subtype !== "braille") as TLayer<LayerTextProps>[]
+    return textLayers.some((layer) => Boolean(layer.props.braille))
+}
+
+export default function CartPreview({ children }: {
+    children: ReactNode
+}) {
+    const { cart, init: setCart, update: updateCart } = useCartStore()
+    const { init: setSign, setCartId, editOptions, clearAll, cartId } = useLayersStore()
+
+    const [open, setOpen] = useState(false)
+    const [loading, setLoading] = useState<number | null>(null)
+    const [pdfLoading, setPdfLoading] = useState(false)
+
+    const loadingProgress = loading !== null && cart.length ? (loading / cart.length) * 100 : 0
+    const { totalQty, totalAmount } = useMemo(() => getCartSummary(cart), [cart])
+
+    const handleQtyChange = (id: number, nextQty: number) => {
+        updateCart(id, { qty: normalizeQty(nextQty) })
+    }
+
+    const handleEditItem = (item: TCartItem) => {
+        clearAll()
+        setSign(item.sign)
+        editOptions(item.options)
+        setCartId(item.id)
+        setOpen(false)
+    }
+
+    const handleRemoveItem = (id: number) => {
+        const filtered = cart.filter((item) => item.id !== id)
+        setCart(filtered)
+
+        if (filtered.length === 0) {
+            const defaults = getDefaultTemplateOptions()
+            clearAll({
+                ...INITIAL_STATE,
+                layers: createTemplateLayers({
+                    templateId: defaults.selectedTemplateId,
+                    shapeId: defaults.selectedShapeId,
+                    materialId: defaults.selectedMaterialId,
+                    preferredSizeId: defaults.selectedSize.id,
+                }),
+            })
+            setCartId(undefined)
+            return
+        }
+
+        if (cartId === id) {
+            const removedIndex = cart.findIndex((item) => item.id === id)
+            const fallbackIndex = removedIndex <= 0 ? 0 : removedIndex - 1
+            const fallbackItem = filtered[fallbackIndex] ?? filtered[0]
+
+            clearAll()
+            setSign(fallbackItem.sign)
+            editOptions(fallbackItem.options)
+            setCartId(fallbackItem.id)
+        }
+    }
+
+    const handleConfirm = async () => {
+        if (cart.length === 0) return
+
+        setLoading(0)
+        try {
+            for (const [index, item] of cart.entries()) {
+                const textLayers = item.sign.filter((layer) => layer.type === "text" && layer.subtype !== "braille") as TLayer<LayerTextProps>[]
+                const title = textLayers.map((layer) => layer.props.text).join(" ")
+
+                const body = {
+                    title,
+                    desc: JSON.stringify(item.sign),
+                    image: item.img,
+                }
+
+                const { data } = await axios.post<{ id: number }>(apiUrl, body)
+
+                try {
+                    await axios.post("/cart/add.json", {
+                        items: [
+                            {
+                                id: data.id,
+                                quantity: normalizeQty(item.qty),
+                            },
+                        ],
+                    })
+                } catch (e) {
+                    console.error(e)
+                }
+
+                setLoading(index + 1)
+            }
+
+            window.location.href = "/cart"
+        } catch (e) {
+            console.error(e)
+        } finally {
+            setLoading(null)
+        }
+    }
+
+    const handleDownloadPdf = async () => {
+        if (cart.length === 0 || pdfLoading || loading !== null) return
+
+        setPdfLoading(true)
+        try {
+            await downloadCartProposalPdf(cart)
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setPdfLoading(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger className="w-full">{children}</DialogTrigger>
+            <DialogContent
+                showCloseButton={false}
+                className="h-[min(95vh,980px)] w-[min(1240px,96vw)] max-w-[96vw] gap-0 overflow-hidden rounded-[34px] border border-[#D8D8D8] p-0 sm:max-w-[1240px]"
+            >
+                <DialogHeader className="border-b border-[#D6D6D6] bg-white px-5 py-4 sm:px-8 sm:py-6">
+                    <div className="flex items-center justify-between gap-4">
+                        <DialogTitle className="text-[24px] font-semibold leading-[1.15] text-[#1C1D1D]">Are you absolutely sure?</DialogTitle>
+                        <DialogClose asChild>
+                            <button
+                                type="button"
+                                className="inline-flex cursor-pointer items-center gap-2 rounded-lg px-1 py-1 text-[16px] font-medium text-[#1C1D1D] hover:opacity-70"
+                                aria-label="Close cart preview"
+                            >
+                                <X className="size-6 sm:size-7" />
+                                <span>Close</span>
+                            </button>
+                        </DialogClose>
+                    </div>
+                    <DialogDescription className="sr-only">Review your signs before checkout.</DialogDescription>
+                </DialogHeader>
+
+                <ScrollArea className="min-h-0 flex-1 bg-[#F7F7F7] md:h-[70vh] lg:h-[75vh]">
+                    <div className="space-y-5 px-5 py-5 sm:px-8 sm:py-6">
+                        {cart.length === 0 ? (
+                            <div className="rounded-[28px] border border-[#D6D6D6] bg-white px-6 py-10 text-center text-xl text-[#8F8F8F] sm:text-2xl">
+                                Your cart is empty.
+                            </div>
+                        ) : (
+                            cart.map((item, index) => {
+                                const qty = normalizeQty(item.qty)
+                                const lineTotal = getUnitPrice(item.options.selectedSize, qty) * qty
+                                const colorLabel = getColorLabel(item)
+                                const templateLabel = getTemplateById(item.options.selectedTemplateId).name
+                                const personalizationLines = getPersonalizationLines(item)
+                                const adaText = hasAdaFont(item) ? "Yes" : "No"
+                                const width = formatSizeNumber(item.options.selectedSize.inchs.w)
+                                const height = formatSizeNumber(item.options.selectedSize.inchs.h)
+
+                                return (
+                                    <article
+                                        key={item.id}
+                                        className="rounded-[28px] border border-[#CFCFCF] bg-[#F4F4F4] p-4 sm:rounded-[34px] sm:p-7"
+                                    >
+                                        <div className="flex flex-col gap-5 md:flex-row md:gap-8">
+                                            <div className="mx-auto w-full max-w-[280px] shrink-0 md:mx-0">
+                                                <img
+                                                    src={item.img}
+                                                    alt={`Sign ${index + 1}`}
+                                                    className="h-auto max-h-[280px] w-full rounded-xl bg-white object-contain"
+                                                />
+                                            </div>
+
+                                            <div className="flex min-w-0 flex-1 flex-col">
+                                                <div className="flex items-start justify-between gap-4">
+                                                    <h3 className="text-[24px] font-semibold leading-none text-[#1C1D1D]">Sign {index + 1}</h3>
+
+                                                    <div className="flex items-center gap-1">
+                                                        <button
+                                                            type="button"
+                                                            className="inline-flex size-10 cursor-pointer items-center justify-center rounded-lg text-[#1C1D1D] transition hover:bg-[#EAEAEA]"
+                                                            aria-label={`Edit sign ${index + 1}`}
+                                                            onClick={() => handleEditItem(item)}
+                                                        >
+                                                            <Edit3 className="size-6" />
+                                                        </button>
+                                                        <button
+                                                            type="button"
+                                                            className="inline-flex size-10 cursor-pointer items-center justify-center rounded-lg text-[#F01818] transition hover:bg-[#FFE9E9]"
+                                                            aria-label={`Delete sign ${index + 1}`}
+                                                            onClick={() => handleRemoveItem(item.id)}
+                                                        >
+                                                            <Trash2 className="size-6" />
+                                                        </button>
+                                                    </div>
+                                                </div>
+
+                                                <div className="mt-2 space-y-1 text-[16px] leading-[1.35] text-[#1C1D1D]">
+                                                    <p>
+                                                        <span className="font-semibold">Size & Color:</span>{" "}
+                                                        {`${width}" x ${height}" - ${colorLabel} - ${templateLabel}`}
+                                                    </p>
+                                                    <div className="flex items-start gap-2">
+                                                        <span className="shrink-0 font-semibold">Personalization:</span>
+                                                        <div className="flex min-w-0 flex-col">
+                                                            {personalizationLines.map((line, lineIndex) => (
+                                                                <span key={`${item.id}-personalization-${lineIndex}`} className="break-words">
+                                                                    {line}
+                                                                </span>
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                    <p>
+                                                        <span className="font-semibold">Braille Font:</span> {adaText}
+                                                    </p>
+                                                </div>
+
+                                                <div className="mt-4 flex flex-wrap items-end justify-between gap-4">
+                                                    <div className="inline-flex items-center rounded-2xl bg-[#EAEAEA] ">
+                                                        <button
+                                                            type="button"
+                                                            className="inline-flex size-12 cursor-pointer items-center justify-center rounded-xl text-[#1C1D1D] hover:bg-[#DEDEDE]"
+                                                            aria-label={`Decrease quantity of sign ${index + 1}`}
+                                                            onClick={() => handleQtyChange(item.id, qty - 1)}
+                                                        >
+                                                            <Minus className="size-3" />
+                                                        </button>
+                                                        <span className="min-w-10 px-1 text-center text-[14px] font-medium text-[#1C1D1D]">{qty}</span>
+                                                        <button
+                                                            type="button"
+                                                            className="inline-flex size-12 cursor-pointer items-center justify-center rounded-xl text-[#1C1D1D] hover:bg-[#DEDEDE]"
+                                                            aria-label={`Increase quantity of sign ${index + 1}`}
+                                                            onClick={() => handleQtyChange(item.id, qty + 1)}
+                                                        >
+                                                            <Plus className="size-3" />
+                                                        </button>
+                                                    </div>
+
+                                                    <p className="text-[24px] font-bold leading-none text-[#1C1D1D]">{formatLinePrice(lineTotal)}</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </article>
+                                )
+                            })
+                        )}
+                    </div>
+                </ScrollArea>
+
+                <div className="border-t border-[#D6D6D6] bg-white px-5 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:px-8 sm:pt-5 sm:pb-6">
+                    {loading !== null && (
+                        <div className="mb-3 space-y-1.5">
+                            <p className="text-sm text-[#667085]">Just a second, we are creating products in Shopify...</p>
+                            <Progress value={loadingProgress} className="w-full" />
+                        </div>
+                    )}
+
+                    <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+                        <div className="flex flex-wrap items-baseline gap-x-10 gap-y-2 text-[20px]">
+                            <p className="text-[#8F8F8F]">
+                                <span>Total quantity:</span>
+                                <span className="ml-3 font-semibold text-[#1C1D1D]">{totalQty}</span>
+                            </p>
+                            <p className="text-[#8F8F8F]">
+                                <span>Total sum:</span>
+                                <span className="ml-3 font-semibold text-[#1C1D1D]">{formatPrice(totalAmount)}</span>
+                            </p>
+                        </div>
+
+                        <div className="flex w-full flex-col gap-3 sm:flex-row lg:w-auto">
+                            <Button
+                                variant="outline"
+                                className="h-[64px] w-full rounded-2xl border-[#D0D5DD] px-8 text-[16px] font-semibold text-[#1C1D1D] hover:bg-[#F7F7F7] sm:w-auto sm:min-w-[230px]"
+                                disabled={cart.length === 0 || loading !== null || pdfLoading}
+                                onClick={() => handleDownloadPdf()}
+                            >
+                                {pdfLoading ? <Spinner /> : <Download className="size-6" />}
+                                {pdfLoading ? "Generating PDF..." : "Download PDF"}
+                            </Button>
+
+                            <Button
+                                className="h-[64px] w-full rounded-2xl bg-[#101010] px-8 text-[16px] font-semibold text-white hover:bg-[#101010]/90 sm:w-auto sm:min-w-[230px] lg:min-w-[260px]"
+                                disabled={cart.length === 0 || loading !== null || pdfLoading}
+                                onClick={() => handleConfirm()}
+                            >
+                                {loading !== null ? <Spinner /> : <ShoppingCart className="size-7" />}
+                                {loading !== null ? "Processing..." : "Checkout"}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/components/cart-view.tsx

@@ -0,0 +1,113 @@
+import { Edit } from "lucide-react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { useCartStore } from "../store/cart-store";
+import { useLayersStore, type TLayersOption } from "../store/layers-store";
+import type { LayrProps, TLayer } from "./preview";
+import { useEffect } from "react";
+
+export default function CartView({ setConstructureSelectedItem }: { setConstructureSelectedItem: (value: string) => void }) {
+    const { layers, init: setSign, preview, setCartId, cartId: currentItemEditId, options, editOptions, clearAll } = useLayersStore();
+    const { cart, add, update, init: setCart } = useCartStore()
+
+    // console.log(cart.map(item => ({bg: item.sign[0].props})));
+
+    const handleRemoveFromCart = (id: number) => {
+        const filtered = cart.filter(item => item.id !== id);
+        setCart(filtered);
+    }
+
+    const handleChangeCurrentItem = (id: number, layers: TLayer<LayrProps>[], itemOptions: TLayersOption) => {
+        clearAll();
+        setSign(layers);
+        editOptions(itemOptions)
+        setCartId(id);
+        setConstructureSelectedItem('template')
+    }
+
+    const handleAddToCart = (id?: number) => {
+        if (id) {
+            const item = cart.find(item => item.id === id);
+            if (item) {
+                const itemId = add(item.sign, item.img, item.options);
+                setSign(item.sign)
+                setCartId(itemId.id);
+            }
+            return;
+        }
+        if (preview) {
+            const itemId = add(layers, preview, options);
+            setCartId(itemId.id);
+        }
+    }
+
+    useEffect(() => {
+        if (cart.length === 0) {
+            setConstructureSelectedItem('template')
+        }
+    }, [cart])
+
+    return (
+        <div className="flex gap-2 items-center flex-wrap py-4">
+            {cart.map(({ sign, id, qty, img, options }) => {
+
+                const textLayers = sign.filter(layer => layer.type === 'text' && layer.subtype !== 'braille') as Array<{ props: { text: string } }>;
+                const text = textLayers.map(text => text.props.text);
+                const itemName = text.join(' ');
+
+                return (
+                    <div key={id} className={`border-1 ${id === currentItemEditId ? "border-black/50" : "border-black/20"}  p-1 flex flex-col items-center gap-4 group`}>
+                        <div className="w-24 h-24 relative group-hover:bg-black/30 group-hover:bg-blend-multiply cursor-pointer" style={{
+                            backgroundImage: `url(${img})`,
+                            backgroundRepeat: 'no-repeat',
+                            backgroundPosition: 'center top',
+                            backgroundSize: 'cover'
+                        }} onClick={() => handleChangeCurrentItem(id, sign, options)}>
+                            <div className="hidden group-hover:block absolute text-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                                {id === currentItemEditId ? (
+                                    <p className="text-xs">being edited</p>
+                                ) : (
+                                    <Edit />
+                                )}
+                            </div>
+
+                            {/* <img src={img} className="w-16 h-16" /> */}
+                        </div>
+                        <div className="space-y-1 relative">
+
+                            <div className="text-sm absolute top-0 right-0 border flex">
+                                {/* <span className="text-center w-full">{index + 1}</span> */}
+                                <Button onClick={() => handleChangeCurrentItem(id, sign, options)} disabled={id === currentItemEditId} className="cursor-pointer active:scale-90" variant={"outline"} size={"icon-sm"}><Edit /></Button>
+                            </div>
+
+                            <p className="">{itemName.length > 40 ? itemName.slice(0, 40) + '...' : itemName} </p>
+                            {/* <span className="text-xs">{id}</span> */}
+
+                            <div className="flex items-end justify-between gap-2">
+                                <div className="space-y-1 flex gap-0.5">
+                                    {/* <Label htmlFor={`quantity_${id}`}>Quantity</Label> */}
+                                    <Button variant={"outline"} size={"icon"} onClick={() => update(id, {}, (prev) => ({ qty: prev.qty !== 1 ? prev.qty - 1 : prev.qty }))}>-</Button>
+                                    <Input
+                                        value={qty}
+                                        type="number"
+                                        name={`quantity_${id}`}
+                                        id={`quantity_${id}`}
+                                        min={1}
+                                        onChange={e => update(id, { qty: Number(e.target.value) })}
+                                        className="max-w-16 text-center"
+                                    />
+                                    <Button variant={"outline"} size={"icon"} onClick={() => update(id, {}, (prev) => ({ qty: prev.qty + 1 }))}>+</Button>
+                                </div>
+
+                                <div className="space-x-1">
+                                    <span className="text-xs text-black/50 hover:underline underline-offset-2 cursor-pointer" onClick={() => handleAddToCart(id)}>dublicate</span>
+                                    <span className="text-xs text-black/50 hover:underline underline-offset-2 cursor-pointer hover:text-red-600" onClick={() => handleRemoveFromCart(id)}>delete</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}