| import { Position } from '../types'; |
| import { cn } from '../lib/utils'; |
|
|
| interface PositionsTableProps { |
| positions: Position[]; |
| priceFlash: { [key: string]: 'up' | 'down' | null }; |
| className?: string; |
| } |
|
|
| export const PositionsTable = ({ positions, priceFlash, className }: PositionsTableProps) => { |
| return ( |
| <div className={cn('glassmorphism rounded-xl p-6', className)}> |
| <h3 className="text-lg font-semibold text-foreground mb-4">Active Positions</h3> |
| |
| <div className="overflow-x-auto"> |
| <table className="w-full"> |
| <thead> |
| <tr className="border-b border-border"> |
| <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Symbol</th> |
| <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Type</th> |
| <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">Leverage</th> |
| <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Entry Price</th> |
| <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Mark Price</th> |
| <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">P&L ($)</th> |
| <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">P&L (%)</th> |
| <th className="text-right py-3 px-4 text-sm font-medium text-muted-foreground">Size</th> |
| </tr> |
| </thead> |
| <tbody> |
| {positions.map((position) => { |
| const isPositive = position.pnlDollars >= 0; |
| const flashClass = priceFlash[position.id] === 'up' ? 'animate-flash-green' : |
| priceFlash[position.id] === 'down' ? 'animate-flash-red' : ''; |
| |
| return ( |
| <tr |
| key={position.id} |
| className={cn( |
| 'border-b border-border/50 hover:bg-accent/30 transition-colors', |
| flashClass |
| )} |
| > |
| <td className="py-3 px-4"> |
| <span className="font-medium text-foreground">{position.symbol}</span> |
| </td> |
| <td className="py-3 px-4"> |
| <span className={cn( |
| 'px-2 py-1 rounded text-xs font-bold', |
| position.type === 'LONG' |
| ? 'bg-green-500/20 text-green-500' |
| : 'bg-red-500/20 text-red-500' |
| )}> |
| {position.type} |
| </span> |
| </td> |
| <td className="py-3 px-4 text-muted-foreground">{position.leverage}</td> |
| <td className="py-3 px-4 text-right font-mono text-foreground"> |
| ${position.entryPrice.toLocaleString()} |
| </td> |
| <td className={cn( |
| 'py-3 px-4 text-right font-mono', |
| priceFlash[position.id] === 'up' ? 'text-green-500' : |
| priceFlash[position.id] === 'down' ? 'text-red-500' : 'text-foreground' |
| )}> |
| ${position.markPrice.toLocaleString()} |
| </td> |
| <td className={cn( |
| 'py-3 px-4 text-right font-mono font-medium', |
| isPositive ? 'text-green-500' : 'text-red-500' |
| )}> |
| {isPositive ? '+' : ''}${position.pnlDollars.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} |
| </td> |
| <td className={cn( |
| 'py-3 px-4 text-right font-mono font-medium', |
| isPositive ? 'text-green-500' : 'text-red-500' |
| )}> |
| {isPositive ? '+' : ''}{position.pnlPercent.toFixed(2)}% |
| </td> |
| <td className="py-3 px-4 text-right text-muted-foreground">{position.size}</td> |
| </tr> |
| ); |
| })} |
| </tbody> |
| </table> |
| </div> |
| </div> |
| ); |
| }; |
|
|
