style: Align public auctions page with TLD Intel styling
- Centered hero header matching TLD pricing page - Large display title with auction count - Consistent login banner design - Hot auctions preview section (like Trending TLDs) - Native table with sortable columns (no PremiumTable) - Consistent filters and tab buttons styling - Loading skeleton and empty states
This commit is contained in:
yves.gugger
@ -5,7 +5,7 @@ import { useStore } from '@/lib/store'
|
|||||||
import { api } from '@/lib/api'
|
import { api } from '@/lib/api'
|
||||||
import { Header } from '@/components/Header'
|
import { Header } from '@/components/Header'
|
||||||
import { Footer } from '@/components/Footer'
|
import { Footer } from '@/components/Footer'
|
||||||
import { PremiumTable, Badge, PlatformBadge, StatCard } from '@/components/PremiumTable'
|
import { PremiumTable, PlatformBadge } from '@/components/PremiumTable'
|
||||||
import {
|
import {
|
||||||
Clock,
|
Clock,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
@ -14,12 +14,12 @@ import {
|
|||||||
Timer,
|
Timer,
|
||||||
Gavel,
|
Gavel,
|
||||||
DollarSign,
|
DollarSign,
|
||||||
RefreshCw,
|
|
||||||
Target,
|
|
||||||
X,
|
X,
|
||||||
ArrowRight,
|
|
||||||
Lock,
|
Lock,
|
||||||
Sparkles,
|
TrendingUp,
|
||||||
|
ChevronUp,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronsUpDown,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
@ -42,7 +42,8 @@ interface Auction {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type TabType = 'all' | 'ending' | 'hot'
|
type TabType = 'all' | 'ending' | 'hot'
|
||||||
type SortField = 'ending' | 'bid_asc' | 'bid_desc' | 'bids'
|
type SortField = 'domain' | 'ending' | 'bid' | 'bids'
|
||||||
|
type SortDirection = 'asc' | 'desc'
|
||||||
|
|
||||||
const PLATFORMS = [
|
const PLATFORMS = [
|
||||||
{ id: 'All', name: 'All Sources' },
|
{ id: 'All', name: 'All Sources' },
|
||||||
@ -52,17 +53,25 @@ const PLATFORMS = [
|
|||||||
{ id: 'DropCatch', name: 'DropCatch' },
|
{ id: 'DropCatch', name: 'DropCatch' },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
function SortIcon({ field, currentField, direction }: { field: SortField, currentField: SortField, direction: SortDirection }) {
|
||||||
|
if (field !== currentField) {
|
||||||
|
return <ChevronsUpDown className="w-4 h-4 text-foreground-subtle" />
|
||||||
|
}
|
||||||
|
return direction === 'asc'
|
||||||
|
? <ChevronUp className="w-4 h-4 text-accent" />
|
||||||
|
: <ChevronDown className="w-4 h-4 text-accent" />
|
||||||
|
}
|
||||||
|
|
||||||
export default function AuctionsPage() {
|
export default function AuctionsPage() {
|
||||||
const { isAuthenticated, checkAuth } = useStore()
|
const { isAuthenticated, checkAuth, isLoading: authLoading } = useStore()
|
||||||
|
|
||||||
const [allAuctions, setAllAuctions] = useState<Auction[]>([])
|
const [allAuctions, setAllAuctions] = useState<Auction[]>([])
|
||||||
const [endingSoon, setEndingSoon] = useState<Auction[]>([])
|
const [endingSoon, setEndingSoon] = useState<Auction[]>([])
|
||||||
const [hotAuctions, setHotAuctions] = useState<Auction[]>([])
|
const [hotAuctions, setHotAuctions] = useState<Auction[]>([])
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [refreshing, setRefreshing] = useState(false)
|
|
||||||
const [activeTab, setActiveTab] = useState<TabType>('all')
|
const [activeTab, setActiveTab] = useState<TabType>('all')
|
||||||
const [sortBy, setSortBy] = useState<SortField>('ending')
|
const [sortField, setSortField] = useState<SortField>('ending')
|
||||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
|
||||||
|
|
||||||
const [searchQuery, setSearchQuery] = useState('')
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
const [selectedPlatform, setSelectedPlatform] = useState('All')
|
const [selectedPlatform, setSelectedPlatform] = useState('All')
|
||||||
@ -91,12 +100,6 @@ export default function AuctionsPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRefresh = async () => {
|
|
||||||
setRefreshing(true)
|
|
||||||
await loadAuctions()
|
|
||||||
setRefreshing(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCurrentAuctions = (): Auction[] => {
|
const getCurrentAuctions = (): Auction[] => {
|
||||||
switch (activeTab) {
|
switch (activeTab) {
|
||||||
case 'ending': return endingSoon
|
case 'ending': return endingSoon
|
||||||
@ -118,28 +121,29 @@ export default function AuctionsPage() {
|
|||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const handleSort = (field: SortField) => {
|
||||||
|
if (sortField === field) {
|
||||||
|
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
|
||||||
|
} else {
|
||||||
|
setSortField(field)
|
||||||
|
setSortDirection('asc')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const sortedAuctions = [...filteredAuctions].sort((a, b) => {
|
const sortedAuctions = [...filteredAuctions].sort((a, b) => {
|
||||||
switch (sortBy) {
|
const modifier = sortDirection === 'asc' ? 1 : -1
|
||||||
case 'bid_asc':
|
switch (sortField) {
|
||||||
return sortDirection === 'asc' ? a.current_bid - b.current_bid : b.current_bid - a.current_bid
|
case 'domain':
|
||||||
case 'bid_desc':
|
return a.domain.localeCompare(b.domain) * modifier
|
||||||
return sortDirection === 'asc' ? b.current_bid - a.current_bid : a.current_bid - b.current_bid
|
case 'bid':
|
||||||
|
return (a.current_bid - b.current_bid) * modifier
|
||||||
case 'bids':
|
case 'bids':
|
||||||
return sortDirection === 'asc' ? a.num_bids - b.num_bids : b.num_bids - a.num_bids
|
return (a.num_bids - b.num_bids) * modifier
|
||||||
default:
|
default:
|
||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleSort = (field: SortField) => {
|
|
||||||
if (sortBy === field) {
|
|
||||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
|
|
||||||
} else {
|
|
||||||
setSortBy(field)
|
|
||||||
setSortDirection('asc')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatCurrency = (amount: number, currency = 'USD') => {
|
const formatCurrency = (amount: number, currency = 'USD') => {
|
||||||
return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
|
||||||
}
|
}
|
||||||
@ -150,16 +154,20 @@ export default function AuctionsPage() {
|
|||||||
return 'text-foreground-muted'
|
return 'text-foreground-muted'
|
||||||
}
|
}
|
||||||
|
|
||||||
const getSubtitle = () => {
|
// Hot auctions preview for the hero section
|
||||||
if (loading) return 'Loading live auctions...'
|
const hotPreview = hotAuctions.slice(0, 4)
|
||||||
const total = allAuctions.length
|
|
||||||
if (total === 0) return 'No active auctions found'
|
if (authLoading) {
|
||||||
return `${total.toLocaleString()} live auctions across 4 platforms`
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="w-5 h-5 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-background relative overflow-hidden">
|
<div className="min-h-screen bg-background relative overflow-hidden">
|
||||||
{/* Background Effects */}
|
{/* Background Effects - matching landing page */}
|
||||||
<div className="fixed inset-0 pointer-events-none">
|
<div className="fixed inset-0 pointer-events-none">
|
||||||
<div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
|
<div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
|
||||||
<div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
|
<div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
|
||||||
@ -176,244 +184,309 @@ export default function AuctionsPage() {
|
|||||||
|
|
||||||
<main className="relative pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6 flex-1">
|
<main className="relative pt-32 sm:pt-40 pb-20 sm:pb-28 px-4 sm:px-6 flex-1">
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
{/* Header */}
|
{/* Hero Header - centered like TLD pricing */}
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8 animate-fade-in">
|
<div className="text-center mb-16 sm:mb-20 animate-fade-in">
|
||||||
<div>
|
<span className="text-sm font-semibold text-accent uppercase tracking-wider">Live Market</span>
|
||||||
<span className="text-sm font-semibold text-accent uppercase tracking-wider">Live Market</span>
|
<h1 className="mt-4 font-display text-[2.5rem] sm:text-[3.5rem] md:text-[4.5rem] lg:text-[5rem] leading-[0.95] tracking-[-0.03em] text-foreground">
|
||||||
<h1 className="mt-2 font-display text-3xl sm:text-4xl md:text-5xl tracking-tight text-foreground">
|
{allAuctions.length}+ Auctions. Real-Time.
|
||||||
Domain Auctions
|
</h1>
|
||||||
</h1>
|
<p className="mt-5 text-lg sm:text-xl text-foreground-muted max-w-2xl mx-auto">
|
||||||
<p className="mt-2 text-foreground-muted">{getSubtitle()}</p>
|
Track domain auctions across GoDaddy, Sedo, NameJet & DropCatch.
|
||||||
</div>
|
</p>
|
||||||
<button
|
|
||||||
onClick={handleRefresh}
|
|
||||||
disabled={refreshing}
|
|
||||||
className="flex items-center gap-2 px-4 py-2.5 text-sm text-foreground-muted hover:text-foreground
|
|
||||||
bg-foreground/5 hover:bg-foreground/10 border border-border/50 rounded-xl
|
|
||||||
transition-all disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
|
|
||||||
Refresh
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats */}
|
{/* Login Banner for non-authenticated users */}
|
||||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8 animate-slide-up">
|
|
||||||
<StatCard title="All Auctions" value={allAuctions.length} icon={Gavel} />
|
|
||||||
<StatCard title="Ending Soon" value={endingSoon.length} icon={Timer} accent />
|
|
||||||
<StatCard title="Hot Auctions" value={hotAuctions.length} subtitle="20+ bids" icon={Flame} />
|
|
||||||
<StatCard
|
|
||||||
title="Opportunities"
|
|
||||||
value={isAuthenticated ? '—' : '—'}
|
|
||||||
subtitle="Login to unlock"
|
|
||||||
icon={Target}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CTA Banner for non-authenticated users */}
|
|
||||||
{!isAuthenticated && (
|
{!isAuthenticated && (
|
||||||
<div className="mb-8 p-5 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl animate-fade-in">
|
<div className="mb-8 p-5 bg-accent-muted border border-accent/20 rounded-xl flex flex-col sm:flex-row items-center justify-between gap-4 animate-fade-in">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center gap-4">
|
<div className="w-10 h-10 bg-accent/20 rounded-xl flex items-center justify-center">
|
||||||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
<Lock className="w-5 h-5 text-accent" />
|
||||||
<Sparkles className="w-6 h-6 text-accent" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-semibold text-foreground">Unlock Smart Opportunities</h3>
|
|
||||||
<p className="text-sm text-foreground-muted">Get AI-powered auction analysis and personalized recommendations</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Link
|
<div>
|
||||||
href="/login"
|
<p className="text-body-sm font-medium text-foreground">Unlock Smart Opportunities</p>
|
||||||
className="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-accent to-accent/80
|
<p className="text-ui-sm text-foreground-muted">
|
||||||
text-background rounded-xl font-medium hover:shadow-[0_0_20px_-5px_rgba(16,185,129,0.4)] transition-all"
|
Sign in for AI-powered analysis and personalized recommendations.
|
||||||
>
|
</p>
|
||||||
Sign In <ArrowRight className="w-4 h-4" />
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="shrink-0 px-5 py-2.5 bg-accent text-background text-ui font-medium rounded-lg
|
||||||
|
hover:bg-accent-hover transition-all duration-300"
|
||||||
|
>
|
||||||
|
Hunt Free
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hot Auctions Preview */}
|
||||||
|
{hotPreview.length > 0 && (
|
||||||
|
<div className="mb-12 sm:mb-16 animate-slide-up">
|
||||||
|
<h2 className="text-body-lg sm:text-heading-sm font-medium text-foreground mb-4 sm:mb-6 flex items-center gap-2">
|
||||||
|
<Flame className="w-5 h-5 text-accent" />
|
||||||
|
Hot Right Now
|
||||||
|
</h2>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
|
||||||
|
{hotPreview.map((auction) => (
|
||||||
|
<a
|
||||||
|
key={`${auction.domain}-${auction.platform}`}
|
||||||
|
href={auction.affiliate_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="p-4 sm:p-5 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover hover:bg-background-secondary transition-all duration-300 text-left group"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<span className="font-mono text-body-lg sm:text-heading-sm text-foreground group-hover:text-accent transition-colors">
|
||||||
|
{auction.domain}
|
||||||
|
</span>
|
||||||
|
<span className="text-ui-sm font-medium px-2 py-0.5 rounded-full text-accent bg-accent-muted flex items-center gap-1">
|
||||||
|
<Flame className="w-3 h-3" />
|
||||||
|
{auction.num_bids}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-body-sm text-foreground-muted">
|
||||||
|
{formatCurrency(auction.current_bid)}
|
||||||
|
</span>
|
||||||
|
<span className={clsx("text-body-sm", getTimeColor(auction.time_remaining))}>
|
||||||
|
{auction.time_remaining}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2">
|
||||||
|
<PlatformBadge platform={auction.platform} />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Search & Filters */}
|
||||||
|
<div className="mb-6 animate-slide-up">
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
<div className="relative flex-1 min-w-[200px] max-w-md">
|
||||||
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-subtle" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search domains..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="w-full pl-12 pr-10 py-3 bg-background-secondary/50 border border-border rounded-xl
|
||||||
|
text-body text-foreground placeholder:text-foreground-subtle
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent
|
||||||
|
transition-all duration-300"
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<button
|
||||||
|
onClick={() => setSearchQuery('')}
|
||||||
|
className="absolute right-4 top-1/2 -translate-y-1/2 p-1 text-foreground-subtle hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<select
|
||||||
|
value={selectedPlatform}
|
||||||
|
onChange={(e) => setSelectedPlatform(e.target.value)}
|
||||||
|
className="px-4 py-3 bg-background-secondary/50 border border-border rounded-xl
|
||||||
|
text-body text-foreground cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent"
|
||||||
|
>
|
||||||
|
{PLATFORMS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
|
||||||
|
</select>
|
||||||
|
<div className="relative">
|
||||||
|
<DollarSign className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="Max bid"
|
||||||
|
value={maxBid}
|
||||||
|
onChange={(e) => setMaxBid(e.target.value)}
|
||||||
|
className="w-32 pl-10 pr-4 py-3 bg-background-secondary/50 border border-border rounded-xl
|
||||||
|
text-body text-foreground placeholder:text-foreground-subtle
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
<div className="flex flex-wrap items-center gap-2 p-1.5 bg-background-secondary/30 border border-border/30 rounded-2xl w-fit mb-6 animate-slide-up">
|
<div className="flex flex-wrap gap-2 mb-6 animate-slide-up">
|
||||||
{[
|
{[
|
||||||
{ id: 'all' as const, label: 'All', icon: Gavel, count: allAuctions.length },
|
{ id: 'all' as const, label: 'All Auctions', icon: Gavel, count: allAuctions.length },
|
||||||
{ id: 'ending' as const, label: 'Ending Soon', icon: Timer, count: endingSoon.length, color: 'warning' },
|
{ id: 'ending' as const, label: 'Ending Soon', icon: Timer, count: endingSoon.length },
|
||||||
{ id: 'hot' as const, label: 'Hot', icon: Flame, count: hotAuctions.length },
|
{ id: 'hot' as const, label: 'Hot', icon: Flame, count: hotAuctions.length },
|
||||||
].map((tab) => (
|
].map((tab) => (
|
||||||
<button
|
<button
|
||||||
key={tab.id}
|
key={tab.id}
|
||||||
onClick={() => setActiveTab(tab.id)}
|
onClick={() => setActiveTab(tab.id)}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-xl transition-all",
|
"flex items-center gap-2 px-4 py-2.5 text-ui-sm font-medium rounded-xl transition-all",
|
||||||
activeTab === tab.id
|
activeTab === tab.id
|
||||||
? tab.color === 'warning'
|
? "bg-accent text-background"
|
||||||
? "bg-amber-500 text-background"
|
: "bg-background-secondary/50 text-foreground-muted hover:text-foreground hover:bg-background-secondary border border-border"
|
||||||
: "bg-gradient-to-r from-accent to-accent/80 text-background shadow-lg shadow-accent/20"
|
|
||||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<tab.icon className="w-4 h-4" />
|
<tab.icon className="w-4 h-4" />
|
||||||
<span className="hidden sm:inline">{tab.label}</span>
|
{tab.label}
|
||||||
<span className={clsx(
|
<span className={clsx(
|
||||||
"text-xs px-1.5 py-0.5 rounded tabular-nums",
|
"text-xs px-1.5 py-0.5 rounded",
|
||||||
activeTab === tab.id ? "bg-background/20" : "bg-foreground/10"
|
activeTab === tab.id ? "bg-background/20" : "bg-foreground/10"
|
||||||
)}>{tab.count}</span>
|
)}>{tab.count}</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filters */}
|
{/* Auctions Table */}
|
||||||
<div className="flex flex-wrap gap-3 mb-6 animate-slide-up">
|
<div className="bg-background-secondary/30 border border-border rounded-xl overflow-hidden animate-slide-up">
|
||||||
<div className="relative flex-1 min-w-[200px] max-w-md">
|
<div className="overflow-x-auto">
|
||||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
|
<table className="w-full">
|
||||||
<input
|
<thead>
|
||||||
type="text"
|
<tr className="bg-background-secondary border-b border-border">
|
||||||
placeholder="Search domains..."
|
<th className="text-left px-4 sm:px-6 py-4">
|
||||||
value={searchQuery}
|
<button
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onClick={() => handleSort('domain')}
|
||||||
className="w-full pl-11 pr-10 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
|
className="flex items-center gap-2 text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||||
text-sm text-foreground placeholder:text-foreground-subtle
|
>
|
||||||
focus:outline-none focus:border-accent/50 transition-all"
|
Domain
|
||||||
/>
|
<SortIcon field="domain" currentField={sortField} direction={sortDirection} />
|
||||||
{searchQuery && (
|
</button>
|
||||||
<button onClick={() => setSearchQuery('')} className="absolute right-4 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground">
|
</th>
|
||||||
<X className="w-4 h-4" />
|
<th className="text-left px-4 sm:px-6 py-4 hidden lg:table-cell">
|
||||||
</button>
|
<span className="text-ui-sm text-foreground-subtle font-medium">Platform</span>
|
||||||
)}
|
</th>
|
||||||
</div>
|
<th className="text-right px-4 sm:px-6 py-4">
|
||||||
<select
|
<button
|
||||||
value={selectedPlatform}
|
onClick={() => handleSort('bid')}
|
||||||
onChange={(e) => setSelectedPlatform(e.target.value)}
|
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||||
className="px-4 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
|
>
|
||||||
text-sm text-foreground cursor-pointer focus:outline-none focus:border-accent/50"
|
Current Bid
|
||||||
>
|
<SortIcon field="bid" currentField={sortField} direction={sortDirection} />
|
||||||
{PLATFORMS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
|
</button>
|
||||||
</select>
|
</th>
|
||||||
<div className="relative">
|
<th className="text-right px-4 sm:px-6 py-4 hidden sm:table-cell">
|
||||||
<DollarSign className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
|
<button
|
||||||
<input
|
onClick={() => handleSort('bids')}
|
||||||
type="number"
|
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||||
placeholder="Max bid"
|
>
|
||||||
value={maxBid}
|
Bids
|
||||||
onChange={(e) => setMaxBid(e.target.value)}
|
<SortIcon field="bids" currentField={sortField} direction={sortDirection} />
|
||||||
className="w-32 pl-10 pr-4 py-3 bg-background-secondary/50 border border-border/50 rounded-xl
|
</button>
|
||||||
text-sm text-foreground placeholder:text-foreground-subtle
|
</th>
|
||||||
focus:outline-none focus:border-accent/50"
|
<th className="text-right px-4 sm:px-6 py-4 hidden md:table-cell">
|
||||||
/>
|
<button
|
||||||
|
onClick={() => handleSort('ending')}
|
||||||
|
className="flex items-center gap-2 ml-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
Time Left
|
||||||
|
<SortIcon field="ending" currentField={sortField} direction={sortDirection} />
|
||||||
|
</button>
|
||||||
|
</th>
|
||||||
|
<th className="px-4 sm:px-6 py-4"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-border">
|
||||||
|
{loading ? (
|
||||||
|
// Loading skeleton
|
||||||
|
Array.from({ length: 10 }).map((_, idx) => (
|
||||||
|
<tr key={idx} className="animate-pulse">
|
||||||
|
<td className="px-4 sm:px-6 py-4"><div className="h-4 w-32 bg-background-tertiary rounded" /></td>
|
||||||
|
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell"><div className="h-4 w-20 bg-background-tertiary rounded" /></td>
|
||||||
|
<td className="px-4 sm:px-6 py-4"><div className="h-4 w-16 bg-background-tertiary rounded ml-auto" /></td>
|
||||||
|
<td className="px-4 sm:px-6 py-4 hidden sm:table-cell"><div className="h-4 w-12 bg-background-tertiary rounded ml-auto" /></td>
|
||||||
|
<td className="px-4 sm:px-6 py-4 hidden md:table-cell"><div className="h-4 w-16 bg-background-tertiary rounded ml-auto" /></td>
|
||||||
|
<td className="px-4 sm:px-6 py-4"><div className="h-8 w-16 bg-background-tertiary rounded ml-auto" /></td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
) : sortedAuctions.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={6} className="px-6 py-12 text-center text-foreground-muted">
|
||||||
|
{searchQuery ? `No auctions found matching "${searchQuery}"` : 'No auctions found'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
sortedAuctions.map((auction) => (
|
||||||
|
<tr
|
||||||
|
key={`${auction.domain}-${auction.platform}`}
|
||||||
|
className="hover:bg-background-secondary/50 transition-colors group"
|
||||||
|
>
|
||||||
|
<td className="px-4 sm:px-6 py-4">
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href={auction.affiliate_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="font-mono text-body-sm sm:text-body font-medium text-foreground hover:text-accent transition-colors"
|
||||||
|
>
|
||||||
|
{auction.domain}
|
||||||
|
</a>
|
||||||
|
<div className="flex items-center gap-2 mt-1 lg:hidden">
|
||||||
|
<PlatformBadge platform={auction.platform} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<PlatformBadge platform={auction.platform} />
|
||||||
|
{auction.age_years && (
|
||||||
|
<span className="text-ui-sm text-foreground-subtle flex items-center gap-1">
|
||||||
|
<Clock className="w-3 h-3" /> {auction.age_years}y
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 sm:px-6 py-4 text-right">
|
||||||
|
<div>
|
||||||
|
<span className="text-body-sm font-medium text-foreground">
|
||||||
|
{formatCurrency(auction.current_bid)}
|
||||||
|
</span>
|
||||||
|
{auction.buy_now_price && (
|
||||||
|
<p className="text-ui-sm text-accent">Buy: {formatCurrency(auction.buy_now_price)}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell">
|
||||||
|
<span className={clsx(
|
||||||
|
"font-medium flex items-center justify-end gap-1",
|
||||||
|
auction.num_bids >= 20 ? "text-accent" : auction.num_bids >= 10 ? "text-amber-400" : "text-foreground-muted"
|
||||||
|
)}>
|
||||||
|
{auction.num_bids}
|
||||||
|
{auction.num_bids >= 20 && <Flame className="w-3 h-3" />}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 sm:px-6 py-4 text-right hidden md:table-cell">
|
||||||
|
<span className={clsx("font-medium", getTimeColor(auction.time_remaining))}>
|
||||||
|
{auction.time_remaining}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 sm:px-6 py-4">
|
||||||
|
<a
|
||||||
|
href={auction.affiliate_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 text-ui-sm text-accent hover:text-accent-hover transition-colors opacity-0 group-hover:opacity-100"
|
||||||
|
>
|
||||||
|
Bid
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Auctions Table */}
|
{/* Stats */}
|
||||||
<div className="animate-slide-up">
|
{!loading && (
|
||||||
<PremiumTable
|
<div className="mt-6 flex justify-center">
|
||||||
data={sortedAuctions}
|
<p className="text-ui-sm text-foreground-subtle">
|
||||||
keyExtractor={(a) => `${a.domain}-${a.platform}`}
|
{searchQuery
|
||||||
loading={loading}
|
? `Found ${sortedAuctions.length} auctions matching "${searchQuery}"`
|
||||||
sortBy={sortBy}
|
: `${allAuctions.length} auctions available across ${PLATFORMS.length - 1} platforms`
|
||||||
sortDirection={sortDirection}
|
}
|
||||||
onSort={(key) => handleSort(key as SortField)}
|
</p>
|
||||||
emptyIcon={<Gavel className="w-12 h-12 text-foreground-subtle" />}
|
</div>
|
||||||
emptyTitle={searchQuery ? `No auctions matching "${searchQuery}"` : "No auctions found"}
|
)}
|
||||||
emptyDescription="Try adjusting your filters or check back later"
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
key: 'domain',
|
|
||||||
header: 'Domain',
|
|
||||||
sortable: true,
|
|
||||||
render: (a) => (
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
href={a.affiliate_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="font-mono font-medium text-foreground hover:text-accent transition-colors"
|
|
||||||
>
|
|
||||||
{a.domain}
|
|
||||||
</a>
|
|
||||||
<div className="flex items-center gap-2 mt-1 lg:hidden">
|
|
||||||
<PlatformBadge platform={a.platform} />
|
|
||||||
{a.age_years && <span className="text-xs text-foreground-subtle">{a.age_years}y</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'platform',
|
|
||||||
header: 'Platform',
|
|
||||||
hideOnMobile: true,
|
|
||||||
render: (a) => (
|
|
||||||
<div className="space-y-1">
|
|
||||||
<PlatformBadge platform={a.platform} />
|
|
||||||
{a.age_years && (
|
|
||||||
<span className="text-xs text-foreground-subtle flex items-center gap-1">
|
|
||||||
<Clock className="w-3 h-3" /> {a.age_years}y
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'bid_asc',
|
|
||||||
header: 'Bid',
|
|
||||||
sortable: true,
|
|
||||||
align: 'right',
|
|
||||||
render: (a) => (
|
|
||||||
<div>
|
|
||||||
<span className="font-medium text-foreground tabular-nums">{formatCurrency(a.current_bid)}</span>
|
|
||||||
{a.buy_now_price && (
|
|
||||||
<p className="text-xs text-accent">Buy: {formatCurrency(a.buy_now_price)}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'bids',
|
|
||||||
header: 'Bids',
|
|
||||||
sortable: true,
|
|
||||||
align: 'right',
|
|
||||||
hideOnMobile: true,
|
|
||||||
render: (a) => (
|
|
||||||
<span className={clsx(
|
|
||||||
"font-medium flex items-center justify-end gap-1 tabular-nums",
|
|
||||||
a.num_bids >= 20 ? "text-accent" : a.num_bids >= 10 ? "text-amber-400" : "text-foreground-muted"
|
|
||||||
)}>
|
|
||||||
{a.num_bids}
|
|
||||||
{a.num_bids >= 20 && <Flame className="w-3 h-3" />}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'ending',
|
|
||||||
header: 'Time Left',
|
|
||||||
sortable: true,
|
|
||||||
align: 'right',
|
|
||||||
hideOnMobile: true,
|
|
||||||
render: (a) => (
|
|
||||||
<span className={clsx("font-medium tabular-nums", getTimeColor(a.time_remaining))}>
|
|
||||||
{a.time_remaining}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'action',
|
|
||||||
header: '',
|
|
||||||
align: 'right',
|
|
||||||
render: (a) => (
|
|
||||||
<a
|
|
||||||
href={a.affiliate_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-1.5 px-4 py-2 bg-foreground text-background text-xs font-medium rounded-lg
|
|
||||||
hover:bg-foreground/90 transition-all opacity-70 group-hover:opacity-100"
|
|
||||||
>
|
|
||||||
Bid <ExternalLink className="w-3 h-3" />
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user