Order List
Installation
Run the following command
npx vibes@latest add order-listUsage
import { OrderList } from '@/vibes/soul/sections/order-list';function Usage() { return ( <OrderList orders={orders} /> );}const products = [ { id: '1', title: 'Mini Bar Bag', subtitle: 'Blue/Black/Green', price: '$65', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1YzIwNTljMi04NzcwLTRiM2ItYmIzMy02ZTk0ODNkY2M5MDk=/mini-bar-bag.jpeg', alt: 'Mini Bar Bag', }, href: '#', rating: 4.3, },];const orders = [ { id: '1', totalPrice: products, status: 'Delivered', href: '#', lineItems: products.slice(0, 3), },];API Reference
OrderListProps
| Prop | Type | Default |
|---|---|---|
className | string | |
title | string | 'Orders' |
orders* | ||
paginationInfo | ||
orderNumberLabel | string | 'Order #' |
totalLabel | string | 'Total' |
viewDetailsLabel | string | 'View details' |
emptyStateTitle | string | 'You don't have any orders' |
emptyStateActionLabel | string | 'Shop now' |
emptyStateActionHref | string | '/' |
Order
| Prop | Type | Default |
|---|---|---|
id* | string | |
totalPrice* | string | |
status* | string | |
href* | string | |
lineItems* | Product[] |
Product
| Prop | Type | Default |
|---|---|---|
id* | string | |
title* | string | |
href* | string | |
image | { src: string; alt: string } | |
price | Price | |
subtitle | string | |
badge | string | |
rating | number |
CursorPaginationInfo
| Prop | Type | Default |
|---|---|---|
startCursorParamName | string | |
startCursor* | string | null | |
endCursorParamName | string | |
endCursor* | string | null |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --order-list-title-font-family: var(--font-family-heading); --order-list-label-font-family: var(--font-family-mono); --order-list-title: var(--foreground); --order-list-label: var(--contrast-500); --order-list-info: var(--foreground); --order-list-border: var(--contrast-100); --order-list-empty-state-title: var(--foreground);}