WatchlistButton
Reference照 app.opinion.trade 線上產品重建的對照版,用來量測與討論。不是 production 的程式碼。
Installation
import { WatchlistButton } from "@/components/product/watchlist-button/watchlist-button";Overview
Shared affordance for "save to watchlist" across product surfaces (MarketCard, MarketHeader, any future market-saving context). Previously inlined per-consumer — now centralized so hover / pressed / focus treatment stays consistent everywhere it is used. Ships in two visual variants: a default standalone form, and an "overlay" form meant for placement on top of an image thumbnail.
Interactive Demo
Default (on a card surface)
Save this market
Overlay (on an image thumbnail)
Variant × State
Static state matrix
default / unfavorited
default / favorited
overlay / unfavorited
overlay / favorited