Order History List

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button, 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/ecommerce32.tsx instead.

Usage

The file also exports ecommerce32Demo, 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 { Ecommerce32, ecommerce32Demo } from "@/components/blocks/ecommerce/ecommerce32";

export default function Page() {
  return <Ecommerce32 {...ecommerce32Demo} />;
}

Props

Types

type OrderStatus = "Delivered" | "Shipped" | "Processing" | "Cancelled";

type OrderItem = {
  orderNumber: string;
  date: string;
  status: OrderStatus;
  itemCount: number;
  total: string;
  thumbnails?: { src: string; alt: string }[];
  detailsHref?: string;
};

Behavior notes

• Fully static and presentational: there are no click handlers or state anywhere in this block, aside from the real Link navigation on View details.
• status maps to one of four literal Tailwind color combinations (Delivered=emerald, Shipped=sky, Processing=amber, Cancelled=red) applied to the Badge's className, since none of these are semantic theme tokens.
• Only the first 3 thumbnails render per order even if more are supplied; when thumbnails is empty or omitted, a single placeholder tile with a Package icon renders instead.
• View details always renders, defaulting detailsHref to "#" when not supplied, via the Button component's render prop wrapping a real next/link Link.