MarketListItem
Installation
import { MarketListItem } from "@/components/product/market-list-item/market-list-item";Overview
List-item entry for markets, used in sidebars, search results, and live-market modules. Title truncates to 2 lines. Integer-card pressable for navigation; hover reveals an inline quick-buy action pair, which fires independently of the card press. The action pair is always YES/NO or UP/DOWN — never rendered alone, and the labels always map to outcome-yes / outcome-no color respectively. When a market is resolved, the card instead shows a resolution badge (YES / NO / TIE) and suppresses hover-reveal entirely, even if quick-buy handlers are still supplied.
Hover-reveal is gated to hover-capable pointers, so touch devices never render the action row.
Interactive Demo
Hover each item to reveal the quick-buy row. Click the card body to fire onPress; click a YES/NO or UP/DOWN button to fire its own handler independently.
Will an Ethereum ETF be approved within this year?
ETH Up or Down - Hourly
Who is the largest company as of the end of May?
Last action: —
Rest State Matrix
Default (no quick-buy)
Can you tell me which company is the largest at the end of May?
Quick-buy YES/NO (hover to reveal)
Will an Ethereum ETF be approved within this year?
Quick-buy UP/DOWN (crypto, hover to reveal)
ETH Up or Down - Hourly
Stacked list (sidebar density)
Can you tell me which company is the largest at the end of May?
Will an Ethereum ETF be approved within this year?
ETH Up or Down - Hourly
Resolved State Matrix
When status === "resolved", hover-reveal is suppressed and a resolution badge appears below the title.
Resolved · YES
Did Bitcoin close above $100k on Jan 1?
Resolved · NO
Did the Fed cut rates in March 2026?
Resolved · TIE
Which candidate won the 2024 primary?
Resolved · with quick-buy handlers present (handlers suppressed)
Did Bitcoin close above $100k on Jan 1?
Edge Cases
Long title truncation (2 lines max)
Will the Federal Reserve cut interest rates by at least 50 basis points before the end of Q3 2026, and will the S&P 500 close above 7,000 on the same announcement day?
Only one quick-buy handler → treated as no quick-buy (pair invariant)
Will BTC close above $100k on Jan 1?