diff --git a/frontend/src/app/terminal/market/page.tsx b/frontend/src/app/terminal/market/page.tsx index cfa4e0e..9ffb2d9 100644 --- a/frontend/src/app/terminal/market/page.tsx +++ b/frontend/src/app/terminal/market/page.tsx @@ -25,7 +25,9 @@ import { LayoutGrid, List, SlidersHorizontal, - MoreHorizontal + MoreHorizontal, + Eye, + Info } from 'lucide-react' import clsx from 'clsx' @@ -136,6 +138,20 @@ function parseTimeToSeconds(timeStr?: string): number { // COMPONENTS // ============================================================================ +// Tooltip Component +function Tooltip({ children, content }: { children: React.ReactNode; content: string }) { + return ( +
+ {children} +
+ {content} + {/* Arrow */} +
+
+
+ ) +} + // Stat Card function StatCard({ label, @@ -196,29 +212,27 @@ function ScoreDisplay({ score, mobile = false }: { score: number; mobile?: boole const offset = circumference - (score / 100) * circumference return ( -
- - - - - = 80 ? 'text-emerald-400' : 'text-zinc-400')}> - {score} - - {/* Tooltip */} -
- Pounce Score + +
+ + + + + = 80 ? 'text-emerald-400' : 'text-zinc-400')}> + {score} +
-
+ ) } @@ -241,27 +255,36 @@ function FilterToggle({ active, onClick, label }: { active: boolean; onClick: () // Sort Header function SortableHeader({ - label, field, currentSort, currentDirection, onSort, align = 'left' + label, field, currentSort, currentDirection, onSort, align = 'left', tooltip }: { - label: string; field: SortField; currentSort: SortField; currentDirection: SortDirection; onSort: (field: SortField) => void; align?: 'left'|'center'|'right' + label: string; field: SortField; currentSort: SortField; currentDirection: SortDirection; onSort: (field: SortField) => void; align?: 'left'|'center'|'right'; tooltip?: string }) { const isActive = currentSort === field return ( - + {tooltip && ( + + + )} - > - {label} -
- - -
- +
) } @@ -446,10 +469,10 @@ export default function MarketPage() { {/* DESKTOP TABLE */}
-
-
-
-
+
+
+
+
Action
@@ -461,10 +484,16 @@ export default function MarketPage() { {/* Domain */}
- {item.isPounce && } + {item.isPounce && ( + + + + )}
-
{item.domain}
-
{item.source}
+
{item.domain}
+ +
{item.source}
+
@@ -472,25 +501,47 @@ export default function MarketPage() {
{/* Price */}
-
{formatPrice(item.price)}
- {item.numBids !== undefined && item.numBids > 0 &&
{item.numBids} bids
} + +
+
{formatPrice(item.price)}
+ {item.numBids !== undefined && item.numBids > 0 &&
{item.numBids} bids
} +
+
{/* Time */}
-
- - {item.timeLeft} -
+ +
+ + {item.timeLeft} +
+
{/* Actions */} -
- - - {item.isPounce ? 'Buy' : 'Bid'} - - +
+ {/* Monitor Button - Distinct Style & Spacing */} + + + + + {/* Buy Button */} + + + {item.isPounce ? 'Buy Now' : 'Place Bid'} + + +
) @@ -527,28 +578,28 @@ export default function MarketPage() {
-
+
{item.isPounce ? 'Buy Now' : 'Place Bid'}