Yves Gugger
26daad68cf
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
653 lines
30 KiB
TypeScript
653 lines
30 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState, useMemo } from 'react'
|
|
import { useStore } from '@/lib/store'
|
|
import { api } from '@/lib/api'
|
|
import { Header } from '@/components/Header'
|
|
import { Footer } from '@/components/Footer'
|
|
import { PlatformBadge } from '@/components/PremiumTable'
|
|
import {
|
|
Clock,
|
|
ExternalLink,
|
|
Search,
|
|
Flame,
|
|
Timer,
|
|
Gavel,
|
|
DollarSign,
|
|
X,
|
|
Lock,
|
|
TrendingUp,
|
|
ChevronUp,
|
|
ChevronDown,
|
|
ChevronsUpDown,
|
|
Sparkles,
|
|
Diamond,
|
|
ShieldCheck,
|
|
Zap,
|
|
Filter,
|
|
Check,
|
|
Shield,
|
|
ArrowUpRight,
|
|
ArrowRight
|
|
} from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import clsx from 'clsx'
|
|
|
|
interface MarketItem {
|
|
id: string
|
|
domain: string
|
|
tld: string
|
|
price: number
|
|
currency: string
|
|
price_type: 'bid' | 'fixed' | 'negotiable'
|
|
status: 'auction' | 'instant'
|
|
source: string
|
|
is_pounce: boolean
|
|
verified: boolean
|
|
time_remaining?: string
|
|
end_time?: string
|
|
num_bids?: number
|
|
slug?: string
|
|
seller_verified: boolean
|
|
url: string
|
|
is_external: boolean
|
|
pounce_score: number
|
|
}
|
|
|
|
interface Auction {
|
|
domain: string
|
|
platform: string
|
|
platform_url: string
|
|
current_bid: number
|
|
currency: string
|
|
num_bids: number
|
|
end_time: string
|
|
time_remaining: string
|
|
buy_now_price: number | null
|
|
reserve_met: boolean | null
|
|
traffic: number | null
|
|
age_years: number | null
|
|
tld: string
|
|
affiliate_url: string
|
|
}
|
|
|
|
type TabType = 'all' | 'ending' | 'hot'
|
|
type SortField = 'domain' | 'ending' | 'bid' | 'bids'
|
|
type SortDirection = 'asc' | 'desc'
|
|
|
|
const PLATFORMS = [
|
|
{ id: 'All', name: 'All Sources' },
|
|
{ id: 'GoDaddy', name: 'GoDaddy' },
|
|
{ id: 'Sedo', name: 'Sedo' },
|
|
{ id: 'NameJet', name: 'NameJet' },
|
|
{ id: 'DropCatch', name: 'DropCatch' },
|
|
]
|
|
|
|
// Premium TLDs that look professional
|
|
const PREMIUM_TLDS = ['com', 'io', 'ai', 'co', 'de', 'ch', 'net', 'org', 'app', 'dev', 'xyz']
|
|
|
|
// Vanity Filter: Only show "beautiful" domains to non-authenticated users
|
|
function isVanityDomain(auction: Auction): boolean {
|
|
const domain = auction.domain
|
|
const parts = domain.split('.')
|
|
if (parts.length < 2) return false
|
|
|
|
const name = parts[0]
|
|
const tld = parts.slice(1).join('.').toLowerCase()
|
|
|
|
// Check TLD is premium
|
|
if (!PREMIUM_TLDS.includes(tld)) return false
|
|
|
|
// Check length (max 12 characters for the name)
|
|
if (name.length > 12) return false
|
|
|
|
// No hyphens
|
|
if (name.includes('-')) return false
|
|
|
|
// No numbers (unless domain is 4 chars or less - short domains are valuable)
|
|
if (name.length > 4 && /\d/.test(name)) return false
|
|
|
|
return true
|
|
}
|
|
|
|
// Generate a mock "Deal Score" for display purposes
|
|
function getDealScore(auction: Auction): number | null {
|
|
let score = 50
|
|
|
|
const name = auction.domain.split('.')[0]
|
|
if (name.length <= 4) score += 20
|
|
else if (name.length <= 6) score += 10
|
|
|
|
if (['com', 'io', 'ai'].includes(auction.tld)) score += 15
|
|
|
|
if (auction.age_years && auction.age_years > 5) score += 10
|
|
|
|
if (auction.num_bids >= 20) score += 15
|
|
else if (auction.num_bids >= 10) score += 10
|
|
|
|
return Math.min(score, 100)
|
|
}
|
|
|
|
function SortIcon({ field, currentField, direction }: { field: SortField, currentField: SortField, direction: SortDirection }) {
|
|
if (field !== currentField) {
|
|
return <ChevronsUpDown className="w-3 h-3 text-white/20" />
|
|
}
|
|
return direction === 'asc'
|
|
? <ChevronUp className="w-3 h-3 text-accent" />
|
|
: <ChevronDown className="w-3 h-3 text-accent" />
|
|
}
|
|
|
|
export default function MarketPage() {
|
|
const { isAuthenticated, checkAuth, isLoading: authLoading } = useStore()
|
|
|
|
const [allAuctions, setAllAuctions] = useState<Auction[]>([])
|
|
const [endingSoon, setEndingSoon] = useState<Auction[]>([])
|
|
const [hotAuctions, setHotAuctions] = useState<Auction[]>([])
|
|
const [pounceItems, setPounceItems] = useState<MarketItem[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [activeTab, setActiveTab] = useState<TabType>('all')
|
|
const [sortField, setSortField] = useState<SortField>('ending')
|
|
const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
|
|
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [selectedPlatform, setSelectedPlatform] = useState('All')
|
|
const [maxBid, setMaxBid] = useState('')
|
|
|
|
useEffect(() => {
|
|
checkAuth()
|
|
loadAuctions()
|
|
}, [checkAuth])
|
|
|
|
const loadAuctions = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const [allFeed, endingFeed, hotFeed, pounceFeed] = await Promise.all([
|
|
api.getMarketFeed({ source: 'all', limit: 100, sortBy: 'time' }),
|
|
api.getMarketFeed({ source: 'external', endingWithin: 24, limit: 50, sortBy: 'time' }),
|
|
api.getMarketFeed({ source: 'external', limit: 50, sortBy: 'score' }),
|
|
api.getMarketFeed({ source: 'pounce', limit: 10 }),
|
|
])
|
|
|
|
const convertToAuction = (item: MarketItem): Auction => ({
|
|
domain: item.domain,
|
|
platform: item.source,
|
|
platform_url: item.url,
|
|
current_bid: item.price,
|
|
currency: item.currency,
|
|
num_bids: item.num_bids || 0,
|
|
end_time: item.end_time || '',
|
|
time_remaining: item.time_remaining || '',
|
|
buy_now_price: item.price_type === 'fixed' ? item.price : null,
|
|
reserve_met: null,
|
|
traffic: null,
|
|
age_years: null,
|
|
tld: item.tld,
|
|
affiliate_url: item.url,
|
|
})
|
|
|
|
const externalOnly = (items: MarketItem[]) => items.filter(i => !i.is_pounce).map(convertToAuction)
|
|
|
|
setAllAuctions(externalOnly(allFeed.items || []))
|
|
setEndingSoon(externalOnly(endingFeed.items || []))
|
|
setHotAuctions(externalOnly(hotFeed.items || []))
|
|
setPounceItems(pounceFeed.items || [])
|
|
} catch (error) {
|
|
console.error('Failed to load auctions:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const getCurrentAuctions = (): Auction[] => {
|
|
switch (activeTab) {
|
|
case 'ending': return endingSoon
|
|
case 'hot': return hotAuctions
|
|
default: return allAuctions
|
|
}
|
|
}
|
|
|
|
// Apply Vanity Filter for non-authenticated users
|
|
const displayAuctions = useMemo(() => {
|
|
const current = getCurrentAuctions()
|
|
if (isAuthenticated) {
|
|
return current
|
|
}
|
|
return current.filter(isVanityDomain)
|
|
}, [activeTab, allAuctions, endingSoon, hotAuctions, isAuthenticated])
|
|
|
|
const filteredAuctions = displayAuctions.filter(auction => {
|
|
if (searchQuery && !auction.domain.toLowerCase().includes(searchQuery.toLowerCase())) {
|
|
return false
|
|
}
|
|
if (selectedPlatform !== 'All' && auction.platform !== selectedPlatform) {
|
|
return false
|
|
}
|
|
if (maxBid && auction.current_bid > parseFloat(maxBid)) {
|
|
return false
|
|
}
|
|
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 modifier = sortDirection === 'asc' ? 1 : -1
|
|
switch (sortField) {
|
|
case 'domain':
|
|
return a.domain.localeCompare(b.domain) * modifier
|
|
case 'bid':
|
|
return (a.current_bid - b.current_bid) * modifier
|
|
case 'bids':
|
|
return (a.num_bids - b.num_bids) * modifier
|
|
default:
|
|
return 0
|
|
}
|
|
})
|
|
|
|
const formatCurrency = (amount: number, currency = 'USD') => {
|
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
|
|
}
|
|
|
|
const getTimeColor = (timeRemaining: string) => {
|
|
if (timeRemaining.includes('m') && !timeRemaining.includes('h')) return 'text-red-400 font-bold'
|
|
if (timeRemaining.includes('h') && parseInt(timeRemaining) < 12) return 'text-amber-400 font-bold'
|
|
return 'text-white/40'
|
|
}
|
|
|
|
const hotPreview = hotAuctions.slice(0, 4)
|
|
|
|
if (authLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-[#020202]">
|
|
<div className="w-12 h-12 border-[0.5px] border-white/10 border-t-accent animate-spin rounded-full" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
|
|
{/* Cinematic Background - Architectural & Fine */}
|
|
<div className="fixed inset-0 pointer-events-none z-0">
|
|
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
|
|
<div
|
|
className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
|
|
backgroundSize: '160px 160px',
|
|
}}
|
|
/>
|
|
<div className="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.02] rounded-full blur-[200px]" />
|
|
</div>
|
|
|
|
<Header />
|
|
|
|
<main className="relative pt-20 sm:pt-32 pb-16 sm:pb-24 px-4 sm:px-6 flex-1">
|
|
<div className="max-w-[1400px] mx-auto">
|
|
{/* Hero Header - High Tech */}
|
|
<div className="mb-12 sm:mb-16 animate-fade-in text-left">
|
|
<div className="flex flex-col lg:flex-row justify-between items-end gap-8 border-b border-white/[0.08] pb-12">
|
|
<div>
|
|
<span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
|
Live Liquidity Pool
|
|
</span>
|
|
<h1 className="font-display text-[2.5rem] sm:text-[4rem] md:text-[5rem] lg:text-[6rem] leading-[0.9] tracking-[-0.03em] text-white">
|
|
Acquire Assets.
|
|
</h1>
|
|
<p className="mt-5 sm:mt-8 text-sm sm:text-lg lg:text-xl text-white/50 max-w-2xl font-light leading-relaxed">
|
|
Global liquidity pool. Verified assets only.
|
|
<span className="block mt-2 text-white/80">Aggregated from GoDaddy, Sedo, and Pounce Direct.</span>
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-12 text-right hidden lg:grid">
|
|
<div>
|
|
<div className="text-3xl font-display text-white mb-1">{formatCurrency(allAuctions.length, 'USD').replace('$', '')}</div>
|
|
<div className="text-[10px] uppercase tracking-widest text-white/30 font-mono">Live Opportunities</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-display text-white mb-1">{pounceItems.length}</div>
|
|
<div className="text-[10px] uppercase tracking-widest text-accent font-mono">Direct Listings</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Login Banner for non-authenticated users */}
|
|
{!isAuthenticated && (
|
|
<div className="mb-12 p-1 border border-accent/20 bg-accent/5 max-w-3xl mx-auto animate-fade-in relative group">
|
|
<div className="absolute -top-px -left-px w-2 h-2 border-t border-l border-accent opacity-50" />
|
|
<div className="absolute -top-px -right-px w-2 h-2 border-t border-r border-accent opacity-50" />
|
|
<div className="absolute -bottom-px -left-px w-2 h-2 border-b border-l border-accent opacity-50" />
|
|
<div className="absolute -bottom-px -right-px w-2 h-2 border-b border-r border-accent opacity-50" />
|
|
|
|
<div className="bg-[#050505] p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between gap-6">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-12 h-12 bg-accent/10 border border-accent/20 flex items-center justify-center text-accent">
|
|
<Lock className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-bold text-white mb-1">Restricted Access</p>
|
|
<p className="text-sm font-mono text-white/50">
|
|
Sign in to unlock valuations, deal scores, and unfiltered data.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/register"
|
|
className="shrink-0 px-8 py-3 bg-accent text-black text-xs font-bold uppercase tracking-widest hover:bg-white transition-all"
|
|
style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
|
|
>
|
|
Authorize
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Pounce Direct Section - Featured */}
|
|
{pounceItems.length > 0 && (
|
|
<div className="mb-20 sm:mb-24 animate-slide-up">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 sm:mb-10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center gap-2 px-3 py-1 bg-accent/10 border border-accent/20">
|
|
<Diamond className="w-4 h-4 text-accent" />
|
|
<span className="text-xs font-bold uppercase tracking-widest text-accent">Direct Listings</span>
|
|
</div>
|
|
<span className="text-[10px] font-mono text-white/30 hidden sm:inline-block">// 0% COMMISSION // INSTANT SETTLEMENT</span>
|
|
</div>
|
|
<Link href="/pricing" className="text-xs font-mono text-white/40 hover:text-white transition-colors flex items-center gap-2">
|
|
How to list my domains? <ArrowRight className="w-3 h-3" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
|
|
{pounceItems.map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={item.url}
|
|
className="group relative border border-white/10 bg-[#050505] hover:border-accent/50 transition-all duration-500 flex flex-col h-full"
|
|
>
|
|
<div className="absolute top-0 right-0 w-10 h-10 bg-white/5 border-l border-b border-white/10 flex items-center justify-center group-hover:bg-accent group-hover:text-black transition-colors duration-300">
|
|
<ArrowUpRight className="w-4 h-4" />
|
|
</div>
|
|
|
|
<div className="p-8 flex flex-col h-full">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<span className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-white/40">Available Now</span>
|
|
</div>
|
|
|
|
<h3 className="font-mono text-2xl sm:text-3xl text-white font-medium mb-3 truncate group-hover:text-accent transition-colors tracking-tight">
|
|
{item.domain}
|
|
</h3>
|
|
|
|
<div className="flex items-center gap-3 mb-8">
|
|
{item.verified && (
|
|
<span className="flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-accent bg-accent/5 px-2 py-1 border border-accent/10">
|
|
<ShieldCheck className="w-3 h-3" /> Verified
|
|
</span>
|
|
)}
|
|
<span className="text-[10px] font-mono text-white/30 px-2 py-1 bg-white/5 border border-white/10">
|
|
{isAuthenticated ? `Score: ${item.pounce_score}/100` : 'Score: [LOCKED]'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-auto pt-6 border-t border-white/[0.05] flex items-end justify-between">
|
|
<div>
|
|
<span className="text-[10px] text-white/30 uppercase tracking-widest block mb-1 font-mono">Buy Price</span>
|
|
<span className="font-mono text-xl sm:text-2xl text-white">{formatCurrency(item.price, item.currency)}</span>
|
|
</div>
|
|
<div className="px-5 py-2.5 bg-white/5 border border-white/10 text-white text-[10px] font-bold uppercase tracking-widest group-hover:bg-accent group-hover:text-black group-hover:border-accent transition-all duration-300">
|
|
Acquire
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Search & Filters - Tech Bar */}
|
|
<div className="mb-10 animate-slide-up sticky top-20 z-30 backdrop-blur-xl bg-[#020202]/90 border-y border-white/[0.08] py-5 -mx-4 px-4 sm:mx-0 sm:px-0">
|
|
<div className="flex flex-col lg:flex-row gap-5 justify-between items-center max-w-[1400px] mx-auto">
|
|
{/* Search */}
|
|
<div className="relative w-full lg:w-[480px] group">
|
|
<Search className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40 group-focus-within:text-accent transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="SEARCH_ASSETS..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-14 pr-5 py-3.5 bg-[#0A0A0A] border border-white/10 text-white placeholder:text-white/20 font-mono text-base focus:outline-none focus:border-accent focus:bg-[#0F0F0F] transition-all rounded-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-4 w-full lg:w-auto items-center">
|
|
<div className="relative group">
|
|
<select
|
|
value={selectedPlatform}
|
|
onChange={(e) => setSelectedPlatform(e.target.value)}
|
|
className="appearance-none pl-5 pr-10 py-3.5 bg-[#0A0A0A] border border-white/10 text-white font-mono text-sm focus:outline-none focus:border-accent cursor-pointer min-w-[180px] hover:border-white/30 transition-colors rounded-none"
|
|
>
|
|
{PLATFORMS.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
|
|
</select>
|
|
<ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40 pointer-events-none group-hover:text-white transition-colors" />
|
|
</div>
|
|
|
|
<div className="flex border border-white/10 bg-[#0A0A0A]">
|
|
{[
|
|
{ id: 'all' as const, label: 'ALL', icon: Gavel },
|
|
{ id: 'ending' as const, label: 'ENDING', icon: Timer },
|
|
{ id: 'hot' as const, label: 'HOT', icon: Flame },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={clsx(
|
|
"px-6 py-3.5 flex items-center gap-3 text-xs font-bold uppercase tracking-widest transition-all border-r border-white/10 last:border-r-0 hover:bg-white/5",
|
|
activeTab === tab.id
|
|
? "bg-white/10 text-white border-b-2 border-accent"
|
|
: "text-white/40 hover:text-white border-b-2 border-transparent"
|
|
)}
|
|
>
|
|
<tab.icon className={clsx("w-4 h-4", activeTab === tab.id ? "text-accent" : "text-current")} />
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Auctions Table - The Terminal */}
|
|
<div className="border border-white/[0.08] bg-[#050505] animate-slide-up shadow-2xl">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-[#0A0A0A] border-b border-white/[0.08]">
|
|
<th className="text-left px-8 py-5">
|
|
<button
|
|
onClick={() => handleSort('domain')}
|
|
className="flex items-center gap-2 text-xs uppercase tracking-widest text-white/40 font-bold hover:text-white transition-colors group"
|
|
>
|
|
Asset
|
|
<span className="opacity-0 group-hover:opacity-100 transition-opacity"><SortIcon field="domain" currentField={sortField} direction={sortDirection} /></span>
|
|
</button>
|
|
</th>
|
|
<th className="text-left px-8 py-5 hidden lg:table-cell">
|
|
<span className="text-xs uppercase tracking-widest text-white/40 font-bold">Source</span>
|
|
</th>
|
|
<th className="text-right px-8 py-5">
|
|
<button
|
|
onClick={() => handleSort('bid')}
|
|
className="flex items-center gap-2 ml-auto text-xs uppercase tracking-widest text-white/40 font-bold hover:text-white transition-colors group"
|
|
>
|
|
Strike Price
|
|
<span className="opacity-0 group-hover:opacity-100 transition-opacity"><SortIcon field="bid" currentField={sortField} direction={sortDirection} /></span>
|
|
</button>
|
|
</th>
|
|
<th className="text-center px-8 py-5 hidden md:table-cell">
|
|
<span className="text-xs uppercase tracking-widest text-white/40 font-bold flex items-center justify-center gap-2">
|
|
Valuation
|
|
{!isAuthenticated && <Lock className="w-3 h-3" />}
|
|
</span>
|
|
</th>
|
|
<th className="text-right px-8 py-5 hidden md:table-cell">
|
|
<button
|
|
onClick={() => handleSort('ending')}
|
|
className="flex items-center gap-2 ml-auto text-xs uppercase tracking-widest text-white/40 font-bold hover:text-white transition-colors group"
|
|
>
|
|
Window
|
|
<span className="opacity-0 group-hover:opacity-100 transition-opacity"><SortIcon field="ending" currentField={sortField} direction={sortDirection} /></span>
|
|
</button>
|
|
</th>
|
|
<th className="px-8 py-5"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/[0.03]">
|
|
{loading ? (
|
|
Array.from({ length: 10 }).map((_, idx) => (
|
|
<tr key={idx} className="animate-pulse">
|
|
<td className="px-8 py-5"><div className="h-5 w-48 bg-white/5 rounded-none" /></td>
|
|
<td className="px-8 py-5 hidden lg:table-cell"><div className="h-5 w-24 bg-white/5 rounded-none" /></td>
|
|
<td className="px-8 py-5"><div className="h-5 w-20 bg-white/5 rounded-none ml-auto" /></td>
|
|
<td className="px-8 py-5 hidden md:table-cell"><div className="h-5 w-24 bg-white/5 rounded-none mx-auto" /></td>
|
|
<td className="px-8 py-5 hidden md:table-cell"><div className="h-5 w-20 bg-white/5 rounded-none ml-auto" /></td>
|
|
<td className="px-8 py-5"><div className="h-8 w-8 bg-white/5 rounded-none ml-auto" /></td>
|
|
</tr>
|
|
))
|
|
) : sortedAuctions.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={6} className="px-8 py-20 text-center text-white/30 font-mono text-base">
|
|
{searchQuery ? `// NO_ASSETS_FOUND: "${searchQuery}"` : '// NO_DATA_AVAILABLE'}
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
sortedAuctions.map((auction) => (
|
|
<tr
|
|
key={`${auction.domain}-${auction.platform}`}
|
|
className="group hover:bg-[#0F0F0F] transition-all duration-200 border-l-2 border-transparent hover:border-accent"
|
|
>
|
|
<td className="px-8 py-6">
|
|
<div>
|
|
<a
|
|
href={auction.affiliate_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-mono text-lg font-medium text-white group-hover:text-accent transition-colors block tracking-tight"
|
|
>
|
|
{auction.domain}
|
|
</a>
|
|
<div className="flex items-center gap-2 mt-1.5 lg:hidden">
|
|
<span className="text-[10px] text-white/30 uppercase tracking-wide font-bold">{auction.platform}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 hidden lg:table-cell">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xs font-mono text-white/40 group-hover:text-white/60 transition-colors">{auction.platform}</span>
|
|
{auction.platform === 'Pounce' && <Diamond className="w-3 h-3 text-accent animate-pulse" />}
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 text-right">
|
|
<div>
|
|
<span className="font-mono text-lg font-medium text-white group-hover:text-white transition-colors">
|
|
{formatCurrency(auction.current_bid)}
|
|
</span>
|
|
{auction.buy_now_price && (
|
|
<span className="block text-[10px] text-accent font-bold uppercase tracking-wide mt-1">Buy Now</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
{/* Valuation - blurred for non-authenticated */}
|
|
<td className="px-8 py-6 text-center hidden md:table-cell">
|
|
{isAuthenticated ? (
|
|
<span className="font-mono text-base text-white/60 group-hover:text-white/80 transition-colors">
|
|
${(auction.current_bid * 1.5).toFixed(0)}
|
|
</span>
|
|
) : (
|
|
<div className="flex justify-center">
|
|
<span className="font-mono text-base text-white/20 blur-[6px] select-none bg-white/5 px-3 py-0.5 group-hover:text-white/30 transition-colors">
|
|
$X,XXX
|
|
</span>
|
|
</div>
|
|
)}
|
|
</td>
|
|
<td className="px-8 py-6 text-right hidden md:table-cell">
|
|
<span className={clsx("font-mono text-sm tracking-tight", getTimeColor(auction.time_remaining))}>
|
|
{auction.time_remaining}
|
|
</span>
|
|
</td>
|
|
<td className="px-8 py-6 text-right">
|
|
<a
|
|
href={auction.affiliate_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center justify-center w-10 h-10 border border-white/10 text-white/40 hover:text-black hover:bg-white hover:border-white transition-all duration-300 opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0"
|
|
>
|
|
<ArrowUpRight className="w-4 h-4" />
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
{!loading && (
|
|
<div className="mt-4 flex justify-between px-4 text-[10px] font-mono text-white/30 uppercase tracking-widest border-t border-white/[0.05] pt-4">
|
|
<span>System Status: Online</span>
|
|
<span>
|
|
{searchQuery
|
|
? `Assets Found: ${sortedAuctions.length}`
|
|
: `Total Assets: ${allAuctions.length}`
|
|
}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Bottom CTA */}
|
|
{!isAuthenticated && (
|
|
<div className="mt-20 p-px bg-gradient-to-r from-accent/20 via-white/5 to-accent/20">
|
|
<div className="bg-[#080808] p-10 text-center relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.05]" />
|
|
<div className="relative z-10">
|
|
<div className="inline-flex items-center justify-center w-12 h-12 border border-accent/20 bg-accent/5 text-accent mb-6">
|
|
<Filter className="w-6 h-6" />
|
|
</div>
|
|
<h3 className="text-2xl font-display text-white mb-4">Eliminate Noise.</h3>
|
|
<p className="text-white/50 mb-8 max-w-lg mx-auto text-lg font-light">
|
|
Our 'Trader' plan filters 99% of junk domains automatically.
|
|
Stop digging through spam. Start acquiring assets.
|
|
</p>
|
|
<Link
|
|
href="/pricing"
|
|
className="inline-flex items-center gap-3 px-8 py-4 bg-accent text-black text-xs font-bold uppercase tracking-widest hover:bg-white transition-all"
|
|
style={{ clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px)' }}
|
|
>
|
|
Upgrade Intel
|
|
<TrendingUp className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|