mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
export interface Order {
|
|
id: string
|
|
symbol: string
|
|
type: "buy" | "sell"
|
|
shares: number
|
|
price: number
|
|
status: "open" | "filled" | "cancelled" | "pending"
|
|
timestamp: number
|
|
orderType?: "market" | "limit"
|
|
}
|
|
|
|
export interface OrdersHistoryProps {
|
|
orders: Order[]
|
|
onCancelOrder?: (orderId: string) => void
|
|
onOrderClick?: (order: Order) => void
|
|
}
|
|
|
|
export function OrdersHistory({
|
|
orders = [],
|
|
onCancelOrder,
|
|
onOrderClick,
|
|
}: Partial<OrdersHistoryProps>) {
|
|
const getTickerFromSymbol = (symbol: string) => {
|
|
return symbol.split(":")[1] || symbol
|
|
}
|
|
|
|
if (orders.length === 0) {
|
|
return (
|
|
<div className="p-4 text-center py-8 text-white/40">
|
|
<p className="text-sm">No orders yet</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 space-y-2">
|
|
{orders.map((order) => (
|
|
<div
|
|
key={order.id}
|
|
className={`bg-white/5 rounded-lg p-3 ${onOrderClick ? "cursor-pointer hover:bg-white/10 transition-colors" : ""}`}
|
|
onClick={() => onOrderClick?.(order)}
|
|
>
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div>
|
|
<div className="font-semibold text-white">
|
|
{getTickerFromSymbol(order.symbol)}
|
|
</div>
|
|
<div className="text-xs text-white/60">
|
|
{new Date(order.timestamp).toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`text-xs px-2 py-1 rounded ${
|
|
order.status === "filled"
|
|
? "bg-success/20 text-success"
|
|
: order.status === "cancelled"
|
|
? "bg-white/10 text-white/60"
|
|
: order.status === "pending"
|
|
? "bg-yellow-500/20 text-yellow-400"
|
|
: "bg-blue-500/20 text-blue-400"
|
|
}`}
|
|
>
|
|
{order.status.charAt(0).toUpperCase() + order.status.slice(1)}
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2 text-xs">
|
|
<div>
|
|
<div className="text-white/60">Side</div>
|
|
<div
|
|
className={`font-medium ${order.type === "buy" ? "text-success" : "text-danger"}`}
|
|
>
|
|
{order.type.toUpperCase()}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-white/60">Shares</div>
|
|
<div className="text-white font-medium">{order.shares}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-white/60">Price</div>
|
|
<div className="text-white font-medium">
|
|
{order.price > 0 ? `$${order.price.toFixed(2)}` : "Market"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{order.orderType && (
|
|
<div className="mt-2 text-xs">
|
|
<span className="text-white/60">Type: </span>
|
|
<span className="text-white font-medium">
|
|
{order.orderType.charAt(0).toUpperCase() +
|
|
order.orderType.slice(1)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{order.status === "open" && onCancelOrder && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onCancelOrder(order.id)
|
|
}}
|
|
className="w-full mt-2 py-1.5 text-xs bg-white/5 hover:bg-white/10 text-white/80 rounded transition-colors"
|
|
>
|
|
Cancel Order
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default OrdersHistory
|