feat: MARKET - Sortable columns + new header design
- All columns now sortable (Domain, Score, Price, Time, Source) - Click column header to sort asc/desc - New professional header with icon, title, and live stats - Cleaner, more compact design - Better mobile responsiveness - Improved filter bar layout
This commit is contained in:
@ -12,12 +12,15 @@ import {
|
||||
Zap,
|
||||
Filter,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Plus,
|
||||
Check,
|
||||
TrendingUp,
|
||||
RefreshCw,
|
||||
ArrowUpDown,
|
||||
Sparkles,
|
||||
BarChart3,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
// ============================================================================
|
||||
@ -49,6 +52,7 @@ interface MarketItem {
|
||||
priceType: 'bid' | 'fixed'
|
||||
status: 'auction' | 'instant'
|
||||
timeLeft?: string
|
||||
endTime?: string
|
||||
source: 'GoDaddy' | 'Sedo' | 'NameJet' | 'DropCatch' | 'Pounce'
|
||||
isPounce: boolean
|
||||
verified?: boolean
|
||||
@ -57,6 +61,9 @@ interface MarketItem {
|
||||
numBids?: number
|
||||
}
|
||||
|
||||
type SortField = 'domain' | 'score' | 'price' | 'time' | 'source'
|
||||
type SortDirection = 'asc' | 'desc'
|
||||
|
||||
// ============================================================================
|
||||
// POUNCE SCORE ALGORITHM
|
||||
// ============================================================================
|
||||
@ -65,7 +72,7 @@ function calculatePounceScore(domain: string, tld: string, numBids?: number, age
|
||||
let score = 50
|
||||
const name = domain.split('.')[0]
|
||||
|
||||
// Length bonus (shorter = better)
|
||||
// Length bonus
|
||||
if (name.length <= 3) score += 30
|
||||
else if (name.length === 4) score += 25
|
||||
else if (name.length === 5) score += 20
|
||||
@ -83,7 +90,7 @@ function calculatePounceScore(domain: string, tld: string, numBids?: number, age
|
||||
else if (ageYears && ageYears > 10) score += 7
|
||||
else if (ageYears && ageYears > 5) score += 3
|
||||
|
||||
// Activity bonus (more bids = more valuable)
|
||||
// Activity bonus
|
||||
if (numBids && numBids >= 20) score += 8
|
||||
else if (numBids && numBids >= 10) score += 5
|
||||
else if (numBids && numBids >= 5) score += 2
|
||||
@ -92,7 +99,7 @@ function calculatePounceScore(domain: string, tld: string, numBids?: number, age
|
||||
if (name.includes('-')) score -= 25
|
||||
if (/\d/.test(name) && name.length > 3) score -= 20
|
||||
if (name.length > 15) score -= 15
|
||||
if (/(.)\1{2,}/.test(name)) score -= 10 // repeated characters
|
||||
if (/(.)\1{2,}/.test(name)) score -= 10
|
||||
|
||||
return Math.max(0, Math.min(100, score))
|
||||
}
|
||||
@ -106,12 +113,28 @@ function isSpamDomain(domain: string, tld: string): boolean {
|
||||
return false
|
||||
}
|
||||
|
||||
// Parse time remaining to seconds for sorting
|
||||
function parseTimeToSeconds(timeStr?: string): number {
|
||||
if (!timeStr) return Infinity
|
||||
|
||||
let seconds = 0
|
||||
const days = timeStr.match(/(\d+)d/)
|
||||
const hours = timeStr.match(/(\d+)h/)
|
||||
const mins = timeStr.match(/(\d+)m/)
|
||||
|
||||
if (days) seconds += parseInt(days[1]) * 86400
|
||||
if (hours) seconds += parseInt(hours[1]) * 3600
|
||||
if (mins) seconds += parseInt(mins[1]) * 60
|
||||
|
||||
return seconds || Infinity
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// COMPONENTS
|
||||
// ============================================================================
|
||||
|
||||
// Score Badge with color coding
|
||||
function ScoreBadge({ score, showLabel = false }: { score: number; showLabel?: boolean }) {
|
||||
// Score Badge
|
||||
function ScoreBadge({ score }: { score: number }) {
|
||||
const color = score >= 80
|
||||
? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30'
|
||||
: score >= 40
|
||||
@ -119,13 +142,12 @@ function ScoreBadge({ score, showLabel = false }: { score: number; showLabel?: b
|
||||
: 'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
|
||||
return (
|
||||
<div className={clsx(
|
||||
"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md border font-mono text-sm font-bold",
|
||||
<span className={clsx(
|
||||
"inline-flex items-center justify-center w-12 h-8 rounded-lg border font-mono text-sm font-bold",
|
||||
color
|
||||
)}>
|
||||
{score}
|
||||
{showLabel && <span className="text-xs font-normal opacity-70">pts</span>}
|
||||
</div>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
@ -133,25 +155,22 @@ function ScoreBadge({ score, showLabel = false }: { score: number; showLabel?: b
|
||||
function SourceBadge({ source, isPounce }: { source: string; isPounce: boolean }) {
|
||||
if (isPounce) {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-emerald-500/10 border border-emerald-500/30 rounded-md">
|
||||
<Diamond className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-xs font-semibold text-emerald-400">Pounce</span>
|
||||
<div className="inline-flex items-center gap-1 px-2 py-1 bg-emerald-500/10 border border-emerald-500/30 rounded">
|
||||
<Diamond className="w-3 h-3 text-emerald-400" />
|
||||
<span className="text-[11px] font-bold text-emerald-400 uppercase">Pounce</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const colors: Record<string, string> = {
|
||||
GoDaddy: 'bg-orange-500/10 border-orange-500/20 text-orange-400',
|
||||
Sedo: 'bg-blue-500/10 border-blue-500/20 text-blue-400',
|
||||
NameJet: 'bg-purple-500/10 border-purple-500/20 text-purple-400',
|
||||
DropCatch: 'bg-cyan-500/10 border-cyan-500/20 text-cyan-400',
|
||||
GoDaddy: 'text-orange-400/80',
|
||||
Sedo: 'text-blue-400/80',
|
||||
NameJet: 'text-purple-400/80',
|
||||
DropCatch: 'text-cyan-400/80',
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={clsx(
|
||||
"inline-flex items-center px-2.5 py-1 rounded-md border text-xs font-medium",
|
||||
colors[source] || 'bg-zinc-800 border-zinc-700 text-zinc-400'
|
||||
)}>
|
||||
<span className={clsx("text-[11px] font-medium uppercase tracking-wide", colors[source] || 'text-zinc-500')}>
|
||||
{source}
|
||||
</span>
|
||||
)
|
||||
@ -161,31 +180,28 @@ function SourceBadge({ source, isPounce }: { source: string; isPounce: boolean }
|
||||
function StatusBadge({ status, timeLeft }: { status: 'auction' | 'instant'; timeLeft?: string }) {
|
||||
if (status === 'instant') {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/20 border border-emerald-500/30 rounded-md">
|
||||
<Zap className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-xs font-bold text-emerald-400">Instant</span>
|
||||
<div className="inline-flex items-center gap-1 px-2 py-1 bg-emerald-500/15 rounded">
|
||||
<Zap className="w-3 h-3 text-emerald-400" />
|
||||
<span className="text-[11px] font-bold text-emerald-400 uppercase">Instant</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Check urgency
|
||||
const isUrgent = timeLeft?.includes('m') && !timeLeft?.includes('d') && !timeLeft?.includes('h')
|
||||
const isWarning = timeLeft?.includes('h') && parseInt(timeLeft) <= 4
|
||||
|
||||
return (
|
||||
<div className={clsx(
|
||||
"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border",
|
||||
isUrgent ? "bg-red-500/20 border-red-500/30" :
|
||||
isWarning ? "bg-amber-500/20 border-amber-500/30" :
|
||||
"bg-zinc-800 border-zinc-700"
|
||||
"inline-flex items-center gap-1 px-2 py-1 rounded",
|
||||
isUrgent ? "bg-red-500/15" : isWarning ? "bg-amber-500/15" : "bg-zinc-800/50"
|
||||
)}>
|
||||
<Timer className={clsx(
|
||||
"w-3.5 h-3.5",
|
||||
isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-400"
|
||||
"w-3 h-3",
|
||||
isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-500"
|
||||
)} />
|
||||
<span className={clsx(
|
||||
"text-xs font-medium",
|
||||
isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-400"
|
||||
"text-[11px] font-medium",
|
||||
isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-500"
|
||||
)}>
|
||||
{timeLeft}
|
||||
</span>
|
||||
@ -193,60 +209,83 @@ function StatusBadge({ status, timeLeft }: { status: 'auction' | 'instant'; time
|
||||
)
|
||||
}
|
||||
|
||||
// Toggle Button
|
||||
function ToggleButton({
|
||||
active,
|
||||
onClick,
|
||||
children
|
||||
// Sortable Column Header
|
||||
function SortHeader({
|
||||
label,
|
||||
field,
|
||||
currentSort,
|
||||
currentDirection,
|
||||
onSort,
|
||||
align = 'left'
|
||||
}: {
|
||||
active: boolean
|
||||
onClick: () => void
|
||||
children: React.ReactNode
|
||||
label: string
|
||||
field: SortField
|
||||
currentSort: SortField
|
||||
currentDirection: SortDirection
|
||||
onSort: (field: SortField) => void
|
||||
align?: 'left' | 'center' | 'right'
|
||||
}) {
|
||||
const isActive = currentSort === field
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
onClick={() => onSort(field)}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
|
||||
active
|
||||
? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
|
||||
: "bg-zinc-800/50 text-zinc-400 border border-zinc-700/50 hover:bg-zinc-800 hover:text-zinc-300"
|
||||
"flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors group",
|
||||
align === 'right' && "justify-end",
|
||||
align === 'center' && "justify-center",
|
||||
isActive ? "text-emerald-400" : "text-zinc-500 hover:text-zinc-300"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{active && <Check className="w-3.5 h-3.5" />}
|
||||
{label}
|
||||
<span className={clsx(
|
||||
"transition-opacity",
|
||||
isActive ? "opacity-100" : "opacity-0 group-hover:opacity-50"
|
||||
)}>
|
||||
{isActive && currentDirection === 'desc' ? (
|
||||
<ChevronDown className="w-3.5 h-3.5" />
|
||||
) : isActive && currentDirection === 'asc' ? (
|
||||
<ChevronUp className="w-3.5 h-3.5" />
|
||||
) : (
|
||||
<ArrowUpDown className="w-3 h-3" />
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// Dropdown Select
|
||||
function DropdownSelect({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
label
|
||||
}: {
|
||||
value: string
|
||||
onChange: (v: string) => void
|
||||
options: { value: string; label: string }[]
|
||||
label: string
|
||||
}) {
|
||||
// Toggle Button
|
||||
function ToggleButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="appearance-none px-4 py-2 pr-10 bg-zinc-800/50 border border-zinc-700/50 rounded-lg
|
||||
text-sm text-zinc-300 font-medium cursor-pointer
|
||||
hover:bg-zinc-800 hover:border-zinc-600 transition-all
|
||||
focus:outline-none focus:border-emerald-500/50"
|
||||
>
|
||||
{options.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 pointer-events-none" />
|
||||
</div>
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-3 py-1.5 rounded text-xs font-medium transition-all",
|
||||
active
|
||||
? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
|
||||
: "bg-zinc-800/50 text-zinc-500 border border-zinc-700/50 hover:text-zinc-300 hover:border-zinc-600"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{active && <Check className="w-3 h-3" />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
function Dropdown({ value, onChange, options }: { value: string; onChange: (v: string) => void; options: { value: string; label: string }[] }) {
|
||||
return (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="appearance-none px-3 py-1.5 pr-8 bg-zinc-800/50 border border-zinc-700/50 rounded
|
||||
text-xs text-zinc-400 font-medium cursor-pointer
|
||||
hover:border-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
|
||||
>
|
||||
{options.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
}
|
||||
|
||||
@ -255,25 +294,28 @@ function DropdownSelect({
|
||||
// ============================================================================
|
||||
|
||||
export default function MarketPage() {
|
||||
const { isAuthenticated, subscription } = useStore()
|
||||
const { subscription } = useStore()
|
||||
|
||||
// Data State
|
||||
// Data
|
||||
const [auctions, setAuctions] = useState<Auction[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
|
||||
// Filter State
|
||||
const [hideSpam, setHideSpam] = useState(true) // Default: ON
|
||||
// Filters
|
||||
const [hideSpam, setHideSpam] = useState(true)
|
||||
const [pounceOnly, setPounceOnly] = useState(false)
|
||||
const [selectedTld, setSelectedTld] = useState('all')
|
||||
const [selectedPrice, setSelectedPrice] = useState('all')
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
|
||||
// Watchlist State
|
||||
// Sorting
|
||||
const [sortField, setSortField] = useState<SortField>('score')
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
|
||||
|
||||
// Watchlist
|
||||
const [trackedDomains, setTrackedDomains] = useState<Set<string>>(new Set())
|
||||
const [trackingInProgress, setTrackingInProgress] = useState<string | null>(null)
|
||||
|
||||
// Options
|
||||
const TLD_OPTIONS = [
|
||||
{ value: 'all', label: 'All TLDs' },
|
||||
{ value: 'com', label: '.com' },
|
||||
@ -286,7 +328,7 @@ export default function MarketPage() {
|
||||
const PRICE_OPTIONS = [
|
||||
{ value: 'all', label: 'Any Price' },
|
||||
{ value: '100', label: '< $100' },
|
||||
{ value: '1000', label: '< $1,000' },
|
||||
{ value: '1000', label: '< $1k' },
|
||||
{ value: '10000', label: 'High Roller' },
|
||||
]
|
||||
|
||||
@ -297,7 +339,7 @@ export default function MarketPage() {
|
||||
const data = await api.getAuctions()
|
||||
setAuctions(data.auctions || [])
|
||||
} catch (error) {
|
||||
console.error('Failed to load market data:', error)
|
||||
console.error('Failed to load:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
@ -313,293 +355,281 @@ export default function MarketPage() {
|
||||
setRefreshing(false)
|
||||
}, [loadData])
|
||||
|
||||
const handleSort = useCallback((field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
|
||||
} else {
|
||||
setSortField(field)
|
||||
setSortDirection(field === 'domain' || field === 'source' ? 'asc' : 'desc')
|
||||
}
|
||||
}, [sortField])
|
||||
|
||||
const handleTrack = useCallback(async (domain: string) => {
|
||||
if (trackedDomains.has(domain) || trackingInProgress) return
|
||||
|
||||
setTrackingInProgress(domain)
|
||||
try {
|
||||
await api.addDomain(domain)
|
||||
setTrackedDomains(prev => new Set([...Array.from(prev), domain]))
|
||||
} catch (error) {
|
||||
console.error('Failed to track:', error)
|
||||
console.error('Failed:', error)
|
||||
} finally {
|
||||
setTrackingInProgress(null)
|
||||
}
|
||||
}, [trackedDomains, trackingInProgress])
|
||||
|
||||
// Transform and Filter Data
|
||||
// Process Data
|
||||
const marketItems = useMemo(() => {
|
||||
// Convert auctions to market items
|
||||
const items: MarketItem[] = auctions.map(auction => ({
|
||||
id: `${auction.domain}-${auction.platform}`,
|
||||
domain: auction.domain,
|
||||
pounceScore: calculatePounceScore(auction.domain, auction.tld, auction.num_bids, auction.age_years ?? undefined),
|
||||
price: auction.current_bid,
|
||||
let items: MarketItem[] = auctions.map(a => ({
|
||||
id: `${a.domain}-${a.platform}`,
|
||||
domain: a.domain,
|
||||
pounceScore: calculatePounceScore(a.domain, a.tld, a.num_bids, a.age_years ?? undefined),
|
||||
price: a.current_bid,
|
||||
priceType: 'bid' as const,
|
||||
status: 'auction' as const,
|
||||
timeLeft: auction.time_remaining,
|
||||
source: auction.platform as any,
|
||||
timeLeft: a.time_remaining,
|
||||
endTime: a.end_time,
|
||||
source: a.platform as any,
|
||||
isPounce: false,
|
||||
affiliateUrl: auction.affiliate_url,
|
||||
tld: auction.tld,
|
||||
numBids: auction.num_bids,
|
||||
affiliateUrl: a.affiliate_url,
|
||||
tld: a.tld,
|
||||
numBids: a.num_bids,
|
||||
}))
|
||||
|
||||
// Apply Filters
|
||||
let filtered = items
|
||||
|
||||
// 1. Hide Spam (Default: ON)
|
||||
if (hideSpam) {
|
||||
filtered = filtered.filter(item => !isSpamDomain(item.domain, item.tld))
|
||||
}
|
||||
|
||||
// 2. Pounce Only
|
||||
if (pounceOnly) {
|
||||
filtered = filtered.filter(item => item.isPounce)
|
||||
}
|
||||
|
||||
// 3. TLD Filter
|
||||
if (selectedTld !== 'all') {
|
||||
filtered = filtered.filter(item => item.tld === selectedTld)
|
||||
}
|
||||
|
||||
// 4. Price Filter
|
||||
// Filter
|
||||
if (hideSpam) items = items.filter(i => !isSpamDomain(i.domain, i.tld))
|
||||
if (pounceOnly) items = items.filter(i => i.isPounce)
|
||||
if (selectedTld !== 'all') items = items.filter(i => i.tld === selectedTld)
|
||||
if (selectedPrice !== 'all') {
|
||||
const maxPrice = parseInt(selectedPrice)
|
||||
if (selectedPrice === '10000') {
|
||||
// High Roller = above $10k
|
||||
filtered = filtered.filter(item => item.price >= 10000)
|
||||
} else {
|
||||
filtered = filtered.filter(item => item.price < maxPrice)
|
||||
}
|
||||
const max = parseInt(selectedPrice)
|
||||
items = selectedPrice === '10000'
|
||||
? items.filter(i => i.price >= 10000)
|
||||
: items.filter(i => i.price < max)
|
||||
}
|
||||
|
||||
// 5. Search
|
||||
if (searchQuery) {
|
||||
const q = searchQuery.toLowerCase()
|
||||
filtered = filtered.filter(item => item.domain.toLowerCase().includes(q))
|
||||
items = items.filter(i => i.domain.toLowerCase().includes(q))
|
||||
}
|
||||
|
||||
// Sort by Pounce Score (highest first)
|
||||
filtered.sort((a, b) => b.pounceScore - a.pounceScore)
|
||||
// Sort
|
||||
items.sort((a, b) => {
|
||||
const mult = sortDirection === 'asc' ? 1 : -1
|
||||
switch (sortField) {
|
||||
case 'domain': return mult * a.domain.localeCompare(b.domain)
|
||||
case 'score': return mult * (a.pounceScore - b.pounceScore)
|
||||
case 'price': return mult * (a.price - b.price)
|
||||
case 'time': return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft))
|
||||
case 'source': return mult * a.source.localeCompare(b.source)
|
||||
default: return 0
|
||||
}
|
||||
})
|
||||
|
||||
return filtered
|
||||
}, [auctions, hideSpam, pounceOnly, selectedTld, selectedPrice, searchQuery])
|
||||
return items
|
||||
}, [auctions, hideSpam, pounceOnly, selectedTld, selectedPrice, searchQuery, sortField, sortDirection])
|
||||
|
||||
// Stats
|
||||
const stats = useMemo(() => ({
|
||||
total: marketItems.length,
|
||||
highScore: marketItems.filter(i => i.pounceScore >= 80).length,
|
||||
avgScore: marketItems.length > 0
|
||||
? Math.round(marketItems.reduce((sum, i) => sum + i.pounceScore, 0) / marketItems.length)
|
||||
: 0,
|
||||
? Math.round(marketItems.reduce((s, i) => s + i.pounceScore, 0) / marketItems.length) : 0,
|
||||
}), [marketItems])
|
||||
|
||||
// Format currency
|
||||
const formatPrice = (price: number) => {
|
||||
if (price >= 1000000) return `$${(price / 1000000).toFixed(1)}M`
|
||||
if (price >= 1000) return `$${(price / 1000).toFixed(1)}k`
|
||||
return `$${price.toLocaleString()}`
|
||||
}
|
||||
const formatPrice = (p: number) => p >= 1000 ? `$${(p / 1000).toFixed(1)}k` : `$${p.toLocaleString()}`
|
||||
|
||||
return (
|
||||
<TerminalLayout
|
||||
title="Market"
|
||||
subtitle={loading ? 'Loading opportunities...' : `${stats.total} domains • ${stats.highScore} with score ≥80`}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<TerminalLayout title="Market" subtitle="">
|
||||
<div className="space-y-4">
|
||||
|
||||
{/* ================================================================ */}
|
||||
{/* FILTER BAR */}
|
||||
{/* HEADER - New Professional Style */}
|
||||
{/* ================================================================ */}
|
||||
<div className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-xl">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Filter Icon */}
|
||||
<div className="flex items-center gap-2 text-zinc-500 mr-2">
|
||||
<Filter className="w-4 h-4" />
|
||||
<span className="text-sm font-medium hidden sm:inline">Filters</span>
|
||||
<div className="flex items-center justify-between pb-4 border-b border-zinc-800/50">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="w-8 h-8 bg-emerald-500/10 border border-emerald-500/20 rounded-lg flex items-center justify-center">
|
||||
<TrendingUp className="w-4 h-4 text-emerald-400" />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-white tracking-tight">Market Feed</h1>
|
||||
</div>
|
||||
|
||||
{/* Toggle: Hide Spam (Default ON) */}
|
||||
<ToggleButton active={hideSpam} onClick={() => setHideSpam(!hideSpam)}>
|
||||
Hide Spam
|
||||
</ToggleButton>
|
||||
|
||||
{/* Toggle: Pounce Direct Only */}
|
||||
<ToggleButton active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)}>
|
||||
<Diamond className="w-3.5 h-3.5" />
|
||||
Pounce Only
|
||||
</ToggleButton>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-px h-8 bg-zinc-700 hidden sm:block" />
|
||||
|
||||
{/* Dropdown: TLD */}
|
||||
<DropdownSelect
|
||||
value={selectedTld}
|
||||
onChange={setSelectedTld}
|
||||
options={TLD_OPTIONS}
|
||||
label="TLD"
|
||||
/>
|
||||
|
||||
{/* Dropdown: Price */}
|
||||
<DropdownSelect
|
||||
value={selectedPrice}
|
||||
onChange={setSelectedPrice}
|
||||
options={PRICE_OPTIONS}
|
||||
label="Price"
|
||||
/>
|
||||
|
||||
{/* Search */}
|
||||
<div className="flex-1 min-w-[200px]">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search domains..."
|
||||
className="w-full px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-lg
|
||||
text-sm text-zinc-300 placeholder:text-zinc-600
|
||||
focus:outline-none focus:border-emerald-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Refresh */}
|
||||
<p className="text-sm text-zinc-500">
|
||||
{loading ? 'Loading...' : (
|
||||
<>
|
||||
<span className="text-zinc-400">{stats.total}</span> domains
|
||||
<span className="mx-2 text-zinc-700">•</span>
|
||||
<span className="text-emerald-400">{stats.highScore}</span> high-score
|
||||
<span className="mx-2 text-zinc-700">•</span>
|
||||
Avg score: <span className="text-zinc-400">{stats.avgScore}</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={refreshing}
|
||||
className="p-2 bg-zinc-800/50 border border-zinc-700/50 rounded-lg text-zinc-400
|
||||
hover:bg-zinc-800 hover:text-zinc-300 transition-all disabled:opacity-50"
|
||||
className="flex items-center gap-2 px-3 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-lg
|
||||
text-xs font-medium text-zinc-400 hover:text-white hover:border-zinc-600 transition-all"
|
||||
>
|
||||
<RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
|
||||
<RefreshCw className={clsx("w-3.5 h-3.5", refreshing && "animate-spin")} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ================================================================ */}
|
||||
{/* MARKET TABLE */}
|
||||
{/* FILTER BAR */}
|
||||
{/* ================================================================ */}
|
||||
<div className="bg-zinc-900/30 border border-zinc-800 rounded-xl overflow-hidden">
|
||||
<div className="flex flex-wrap items-center gap-2 py-3 px-4 bg-zinc-900/30 border border-zinc-800/50 rounded-lg">
|
||||
<Filter className="w-3.5 h-3.5 text-zinc-600" />
|
||||
|
||||
{/* Table Header */}
|
||||
<div className="grid grid-cols-12 gap-4 px-6 py-4 bg-zinc-900/50 border-b border-zinc-800 text-xs font-semibold text-zinc-500 uppercase tracking-wider">
|
||||
<div className="col-span-4">Domain</div>
|
||||
<div className="col-span-1 text-center hidden lg:block">Score</div>
|
||||
<div className="col-span-2 text-right">Price / Bid</div>
|
||||
<div className="col-span-2 text-center hidden md:block">Status</div>
|
||||
<div className="col-span-1 text-center hidden lg:block">Source</div>
|
||||
<div className="col-span-2 text-right">Action</div>
|
||||
<ToggleButton active={hideSpam} onClick={() => setHideSpam(!hideSpam)}>
|
||||
<Sparkles className="w-3 h-3" />
|
||||
Hide Spam
|
||||
</ToggleButton>
|
||||
|
||||
<ToggleButton active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)}>
|
||||
<Diamond className="w-3 h-3" />
|
||||
Pounce Only
|
||||
</ToggleButton>
|
||||
|
||||
<div className="w-px h-5 bg-zinc-800 mx-1" />
|
||||
|
||||
<Dropdown value={selectedTld} onChange={setSelectedTld} options={TLD_OPTIONS} />
|
||||
<Dropdown value={selectedPrice} onChange={setSelectedPrice} options={PRICE_OPTIONS} />
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search..."
|
||||
className="w-40 px-3 py-1.5 bg-zinc-800/30 border border-zinc-700/50 rounded
|
||||
text-xs text-zinc-300 placeholder:text-zinc-600
|
||||
focus:outline-none focus:border-emerald-500/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ================================================================ */}
|
||||
{/* TABLE */}
|
||||
{/* ================================================================ */}
|
||||
<div className="bg-zinc-900/20 border border-zinc-800/50 rounded-lg overflow-hidden">
|
||||
|
||||
{/* Header Row */}
|
||||
<div className="grid grid-cols-12 gap-3 px-4 py-3 bg-zinc-900/50 border-b border-zinc-800/50">
|
||||
<div className="col-span-4">
|
||||
<SortHeader label="Domain" field="domain" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
|
||||
</div>
|
||||
<div className="col-span-1 hidden lg:block">
|
||||
<SortHeader label="Score" field="score" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<SortHeader label="Price" field="price" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="right" />
|
||||
</div>
|
||||
<div className="col-span-2 hidden md:block">
|
||||
<SortHeader label="Time" field="time" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
|
||||
</div>
|
||||
<div className="col-span-1 hidden lg:block">
|
||||
<SortHeader label="Source" field="source" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
|
||||
</div>
|
||||
<div className="col-span-2 text-right">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-500">Action</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Body */}
|
||||
{/* Body */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="w-6 h-6 text-emerald-500 animate-spin" />
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="w-5 h-5 text-emerald-500 animate-spin" />
|
||||
</div>
|
||||
) : marketItems.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
<TrendingUp className="w-12 h-12 text-zinc-700 mx-auto mb-4" />
|
||||
<p className="text-zinc-500 font-medium">No domains match your filters</p>
|
||||
<p className="text-zinc-600 text-sm mt-1">Try adjusting your filter settings</p>
|
||||
<div className="text-center py-16">
|
||||
<BarChart3 className="w-10 h-10 text-zinc-700 mx-auto mb-3" />
|
||||
<p className="text-sm text-zinc-500">No domains match your filters</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-zinc-800/50">
|
||||
<div className="divide-y divide-zinc-800/30">
|
||||
{marketItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={clsx(
|
||||
"grid grid-cols-12 gap-4 px-6 py-4 items-center transition-colors",
|
||||
item.isPounce
|
||||
? "bg-emerald-500/[0.03] hover:bg-emerald-500/[0.06]"
|
||||
: "hover:bg-zinc-800/30"
|
||||
"grid grid-cols-12 gap-3 px-4 py-3 items-center transition-colors",
|
||||
item.isPounce ? "bg-emerald-500/[0.02] hover:bg-emerald-500/[0.05]" : "hover:bg-zinc-800/20"
|
||||
)}
|
||||
>
|
||||
{/* Domain */}
|
||||
<div className="col-span-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{item.isPounce && (
|
||||
<Diamond className="w-4 h-4 text-emerald-400 flex-shrink-0" />
|
||||
<div className="flex items-center gap-2">
|
||||
{item.isPounce && <Diamond className="w-3.5 h-3.5 text-emerald-400 flex-shrink-0" />}
|
||||
<span className="font-mono text-sm font-semibold text-white truncate">{item.domain}</span>
|
||||
{item.verified && (
|
||||
<span className="text-[10px] bg-emerald-500/20 text-emerald-400 px-1 rounded">✓</span>
|
||||
)}
|
||||
<div>
|
||||
<span className="font-mono font-semibold text-white">{item.domain}</span>
|
||||
{item.verified && (
|
||||
<span className="ml-2 text-xs bg-emerald-500/20 text-emerald-400 px-1.5 py-0.5 rounded">
|
||||
✓ Verified
|
||||
</span>
|
||||
)}
|
||||
{/* Mobile: Show score inline */}
|
||||
<div className="flex items-center gap-2 mt-1 lg:hidden">
|
||||
<ScoreBadge score={item.pounceScore} />
|
||||
<SourceBadge source={item.source} isPounce={item.isPounce} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile info */}
|
||||
<div className="flex items-center gap-2 mt-1 lg:hidden">
|
||||
<ScoreBadge score={item.pounceScore} />
|
||||
<SourceBadge source={item.source} isPounce={item.isPounce} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pounce Score */}
|
||||
<div className="col-span-1 text-center hidden lg:block">
|
||||
{/* Score */}
|
||||
<div className="col-span-1 hidden lg:flex justify-center">
|
||||
<ScoreBadge score={item.pounceScore} />
|
||||
</div>
|
||||
|
||||
{/* Price / Bid */}
|
||||
{/* Price */}
|
||||
<div className="col-span-2 text-right">
|
||||
<span className="font-semibold text-white font-mono">
|
||||
{formatPrice(item.price)}
|
||||
</span>
|
||||
{item.priceType === 'bid' && (
|
||||
<span className="text-zinc-500 text-xs ml-1">(bid)</span>
|
||||
)}
|
||||
<span className="font-mono text-sm font-semibold text-white">{formatPrice(item.price)}</span>
|
||||
{item.priceType === 'bid' && <span className="text-zinc-600 text-[10px] ml-1">bid</span>}
|
||||
{item.numBids && item.numBids > 0 && (
|
||||
<p className="text-xs text-zinc-500 mt-0.5">{item.numBids} bids</p>
|
||||
<p className="text-[10px] text-zinc-600">{item.numBids} bids</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status / Time */}
|
||||
<div className="col-span-2 text-center hidden md:flex justify-center">
|
||||
{/* Status */}
|
||||
<div className="col-span-2 hidden md:flex justify-center">
|
||||
<StatusBadge status={item.status} timeLeft={item.timeLeft} />
|
||||
</div>
|
||||
|
||||
{/* Source */}
|
||||
<div className="col-span-1 text-center hidden lg:flex justify-center">
|
||||
<div className="col-span-1 hidden lg:flex justify-center">
|
||||
<SourceBadge source={item.source} isPounce={item.isPounce} />
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-span-2 flex items-center gap-2 justify-end">
|
||||
{/* Track Button */}
|
||||
<div className="col-span-2 flex items-center gap-1.5 justify-end">
|
||||
<button
|
||||
onClick={() => handleTrack(item.domain)}
|
||||
disabled={trackedDomains.has(item.domain) || trackingInProgress === item.domain}
|
||||
className={clsx(
|
||||
"p-2 rounded-lg transition-all",
|
||||
"p-1.5 rounded transition-all",
|
||||
trackedDomains.has(item.domain)
|
||||
? "bg-emerald-500/20 text-emerald-400"
|
||||
: "bg-zinc-800 text-zinc-400 hover:text-white hover:bg-zinc-700"
|
||||
: "bg-zinc-800/50 text-zinc-500 hover:text-white"
|
||||
)}
|
||||
title={trackedDomains.has(item.domain) ? 'Tracked' : 'Add to Watchlist'}
|
||||
>
|
||||
{trackingInProgress === item.domain ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
) : trackedDomains.has(item.domain) ? (
|
||||
<Check className="w-4 h-4" />
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
) : (
|
||||
<Plus className="w-4 h-4" />
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Action Button */}
|
||||
<a
|
||||
href={item.affiliateUrl || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={clsx(
|
||||
"inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all",
|
||||
"inline-flex items-center gap-1 px-3 py-1.5 rounded text-xs font-semibold transition-all",
|
||||
item.isPounce
|
||||
? "bg-emerald-500 text-black hover:bg-emerald-400"
|
||||
: "bg-white text-black hover:bg-zinc-200"
|
||||
)}
|
||||
>
|
||||
{item.isPounce ? 'Buy' : 'Bid'}
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -608,18 +638,11 @@ export default function MarketPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ================================================================ */}
|
||||
{/* FOOTER INFO */}
|
||||
{/* ================================================================ */}
|
||||
<div className="flex items-center justify-between text-xs text-zinc-600">
|
||||
<span>
|
||||
Showing {marketItems.length} of {auctions.length} total listings
|
||||
</span>
|
||||
<span>
|
||||
Data from GoDaddy, Sedo, NameJet, DropCatch • Updated every 15 minutes
|
||||
</span>
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between text-[11px] text-zinc-600 px-1">
|
||||
<span>{marketItems.length} of {auctions.length} listings</span>
|
||||
<span>GoDaddy • Sedo • NameJet • DropCatch</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</TerminalLayout>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user