Wishlist Manager

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce1.tsx instead.

Usage

The file also exports ecommerce1Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce1, ecommerce1Demo } from "@/components/blocks/ecommerce/ecommerce1";

export default function Page() {
  return <Ecommerce1 {...ecommerce1Demo} />;
}

Props

Types

interface WishlistItem {
  id: string;
  name: string;
  brand?: string;
  price: string;
  originalPrice?: string;
  image?: { src: string; alt: string };
  stock: "in-stock" | "low-stock" | "out-of-stock";
}

Behavior notes

• "Move to cart" and "Remove" both remove the item from local component state (a real useState array); there's no cart or backend behind this block, so "move to cart" is honestly just a removal from the wishlist view.
• "Move to cart" is disabled once an item's stock is "out-of-stock", the remove (X) button stays enabled regardless of stock.
• The empty state shown after removing every item is real, reachable UI, not a separate mockup, remove all 8 demo items in the live preview to see it.
• Refreshing the page resets the list back to the seeded `items` prop since nothing persists.
• Items with no `image` fall back to `MediaSlot`'s built-in placeholder rather than a broken image.