feat(MED-100): show toast on delete

app/home/(user)/_components/cart/cart-item-delete.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Trash } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from 'sonner';
+
+import { deleteLineItem } from "@lib/data/cart";
+import { Spinner } from "@medusajs/icons";
+
+const CartItemDelete = ({
+  id,
+  children,
+}: {
+  id: string;
+  children?: React.ReactNode;
+}) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { t } = useTranslation();
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+
+    const promise = async () => {
+      await deleteLineItem(id);
+    };
+
+    toast.promise(promise, {
+      success: t(`cart:items.delete.success`),
+      loading: t(`cart:items.delete.loading`),
+      error: t(`cart:items.delete.error`),
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-between text-small-regular">
+      <button
+        className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
+        onClick={() => handleDelete()}
+      >
+        {isDeleting ? <Spinner className="animate-spin" /> : <Trash />}
+        <span>{children}</span>
+      </button>
+    </div>
+  );
+};
+
+export default CartItemDelete;