26 lines
1005 B
TypeScript
26 lines
1005 B
TypeScript
import type { OrderSummary } from "@orderops/shared";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface OrderListProps {
|
|
orders: OrderSummary[];
|
|
}
|
|
|
|
export function OrderList({ orders }: OrderListProps) {
|
|
return (
|
|
<div className="rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
<div className="border-b border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700">Orders</div>
|
|
<ul className="divide-y divide-slate-200">
|
|
{orders.map((order) => (
|
|
<li key={order.id}>
|
|
<Link className="flex flex-col gap-1 px-4 py-3 text-left transition hover:bg-slate-50" to={`/orders/${order.id}`}>
|
|
<span className="text-sm font-semibold text-slate-900">{order.orderNumber}</span>
|
|
<span className="text-sm text-slate-600">{order.customer.name}</span>
|
|
<span className="text-xs text-slate-500">{order.status} · {order.itemCount} items</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|