feat: MARKET - Complete UI Overhaul (Award-Winning Style)
Changes: - Redesigned Metric Grid with trend indicators - New separated Control Bar for search & filters - High-end Data Grid with ultra-thin borders and hover effects - Custom SVG 'Score Ring' component for Pounce Score - Modern typography and spacing - Removed 'clutter' badges, replaced with minimal indicators
This commit is contained in:
@ -21,6 +21,10 @@ import {
|
|||||||
Activity,
|
Activity,
|
||||||
Flame,
|
Flame,
|
||||||
Clock,
|
Clock,
|
||||||
|
Search,
|
||||||
|
LayoutGrid,
|
||||||
|
List,
|
||||||
|
SlidersHorizontal
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
|
||||||
@ -131,143 +135,123 @@ function parseTimeToSeconds(timeStr?: string): number {
|
|||||||
// COMPONENTS
|
// COMPONENTS
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
|
|
||||||
// Score Badge with color coding
|
// Stat Card
|
||||||
function ScoreBadge({ score }: { score: number }) {
|
function StatCard({
|
||||||
const color = score >= 80
|
label,
|
||||||
? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30'
|
value,
|
||||||
: score >= 40
|
subValue,
|
||||||
? 'bg-amber-500/20 text-amber-400 border-amber-500/30'
|
icon: Icon,
|
||||||
: 'bg-red-500/20 text-red-400 border-red-500/30'
|
trend
|
||||||
|
}: {
|
||||||
|
label: string
|
||||||
|
value: string | number
|
||||||
|
subValue?: string
|
||||||
|
icon: any
|
||||||
|
trend?: 'up' | 'down' | 'neutral'
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className={clsx(
|
<div className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 flex items-start justify-between group hover:border-white/10 transition-all">
|
||||||
"inline-flex items-center justify-center w-12 h-8 rounded-md border font-mono text-sm font-bold",
|
<div>
|
||||||
color
|
<p className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-1">{label}</p>
|
||||||
)}>
|
<div className="flex items-baseline gap-2">
|
||||||
{score}
|
<span className="text-2xl font-bold text-white tracking-tight">{value}</span>
|
||||||
|
{subValue && <span className="text-xs text-zinc-500 font-medium">{subValue}</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={clsx(
|
||||||
|
"p-2 rounded-lg bg-zinc-800/50 text-zinc-400 group-hover:text-white transition-colors",
|
||||||
|
trend === 'up' && "text-emerald-400 bg-emerald-500/10",
|
||||||
|
trend === 'down' && "text-red-400 bg-red-500/10"
|
||||||
|
)}>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Source Badge
|
// Modern Score Indicator
|
||||||
function SourceBadge({ source, isPounce }: { source: string; isPounce: boolean }) {
|
function ScoreRing({ score }: { score: number }) {
|
||||||
if (isPounce) {
|
const color = score >= 80 ? 'text-emerald-500' : score >= 50 ? 'text-amber-500' : 'text-zinc-600'
|
||||||
return (
|
const size = 32
|
||||||
<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">
|
const strokeWidth = 3
|
||||||
<Diamond className="w-3.5 h-3.5 text-emerald-400" />
|
const radius = (size - strokeWidth) / 2
|
||||||
<span className="text-xs font-semibold text-emerald-400">Pounce</span>
|
const circumference = radius * 2 * Math.PI
|
||||||
</div>
|
const offset = circumference - (score / 100) * circumference
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
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',
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span className={clsx(
|
<div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
|
||||||
"inline-flex items-center px-2.5 py-1 rounded-md border text-xs font-medium",
|
{/* Background Ring */}
|
||||||
colors[source] || 'bg-zinc-800 border-zinc-700 text-zinc-400'
|
<svg className="absolute w-full h-full -rotate-90">
|
||||||
)}>
|
<circle
|
||||||
{source}
|
cx={size / 2}
|
||||||
</span>
|
cy={size / 2}
|
||||||
)
|
r={radius}
|
||||||
}
|
className="stroke-zinc-800"
|
||||||
|
strokeWidth={strokeWidth}
|
||||||
// Status Badge
|
fill="none"
|
||||||
function StatusBadge({ status, timeLeft }: { status: 'auction' | 'instant'; timeLeft?: string }) {
|
/>
|
||||||
if (status === 'instant') {
|
{/* Progress Ring */}
|
||||||
return (
|
<circle
|
||||||
<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">
|
cx={size / 2}
|
||||||
<Zap className="w-3.5 h-3.5 text-emerald-400" />
|
cy={size / 2}
|
||||||
<span className="text-xs font-bold text-emerald-400">Instant</span>
|
r={radius}
|
||||||
</div>
|
className={clsx("transition-all duration-500 ease-out", color)}
|
||||||
)
|
strokeWidth={strokeWidth}
|
||||||
}
|
strokeDasharray={circumference}
|
||||||
|
strokeDashoffset={offset}
|
||||||
const isUrgent = timeLeft?.includes('m') && !timeLeft?.includes('d') && !timeLeft?.includes('h')
|
strokeLinecap="round"
|
||||||
const isWarning = timeLeft?.includes('h') && parseInt(timeLeft) <= 4
|
fill="none"
|
||||||
|
/>
|
||||||
return (
|
</svg>
|
||||||
<div className={clsx(
|
<span className={clsx("text-[10px] font-bold font-mono", score >= 80 ? 'text-emerald-400' : 'text-zinc-400')}>
|
||||||
"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border",
|
{score}
|
||||||
isUrgent ? "bg-red-500/20 border-red-500/30" :
|
|
||||||
isWarning ? "bg-amber-500/20 border-amber-500/30" :
|
|
||||||
"bg-zinc-800 border-zinc-700"
|
|
||||||
)}>
|
|
||||||
<Timer className={clsx(
|
|
||||||
"w-3.5 h-3.5",
|
|
||||||
isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-400"
|
|
||||||
)} />
|
|
||||||
<span className={clsx(
|
|
||||||
"text-xs font-medium",
|
|
||||||
isUrgent ? "text-red-400" : isWarning ? "text-amber-400" : "text-zinc-400"
|
|
||||||
)}>
|
|
||||||
{timeLeft}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle Button
|
// Refined Source Badge
|
||||||
function ToggleButton({
|
function SourceBadge({ source, isPounce }: { source: string; isPounce: boolean }) {
|
||||||
|
if (isPounce) return (
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
|
||||||
|
<span className="text-xs font-semibold text-white tracking-tight">Pounce</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors">
|
||||||
|
{source}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Minimal Toggle
|
||||||
|
function FilterToggle({
|
||||||
active,
|
active,
|
||||||
onClick,
|
onClick,
|
||||||
children
|
label
|
||||||
}: {
|
}: {
|
||||||
active: boolean
|
active: boolean
|
||||||
onClick: () => void
|
onClick: () => void
|
||||||
children: React.ReactNode
|
label: string
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all",
|
"px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
|
||||||
active
|
active
|
||||||
? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
|
? "bg-white text-zinc-950 border-white"
|
||||||
: "bg-zinc-800/50 text-zinc-400 border border-zinc-700/50 hover:bg-zinc-800 hover:text-zinc-300"
|
: "bg-transparent text-zinc-400 border-zinc-800 hover:border-zinc-700 hover:text-zinc-300"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{children}
|
{label}
|
||||||
{active && <Check className="w-3.5 h-3.5" />}
|
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdown Select
|
// Sort Header
|
||||||
function DropdownSelect({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
options,
|
|
||||||
}: {
|
|
||||||
value: string
|
|
||||||
onChange: (v: string) => void
|
|
||||||
options: { value: string; label: string }[]
|
|
||||||
}) {
|
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sortable Column Header
|
|
||||||
function SortableHeader({
|
function SortableHeader({
|
||||||
label,
|
label,
|
||||||
field,
|
field,
|
||||||
@ -289,28 +273,23 @@ function SortableHeader({
|
|||||||
<button
|
<button
|
||||||
onClick={() => onSort(field)}
|
onClick={() => onSort(field)}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider transition-colors group",
|
"flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest transition-all group select-none",
|
||||||
align === 'right' && "justify-end ml-auto",
|
align === 'right' && "justify-end ml-auto",
|
||||||
align === 'center' && "justify-center mx-auto",
|
align === 'center' && "justify-center mx-auto",
|
||||||
isActive ? "text-emerald-400" : "text-zinc-500 hover:text-zinc-300"
|
isActive ? "text-white" : "text-zinc-500 hover:text-zinc-300"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
<span className={clsx("transition-all", isActive ? "opacity-100" : "opacity-0 group-hover:opacity-50")}>
|
<div className={clsx("flex flex-col -space-y-1", isActive ? "opacity-100" : "opacity-0 group-hover:opacity-50")}>
|
||||||
{isActive && currentDirection === 'desc' ? (
|
<ChevronUp className={clsx("w-2 h-2", isActive && currentDirection === 'asc' ? "text-white" : "text-zinc-600")} />
|
||||||
<ChevronDown className="w-4 h-4" />
|
<ChevronDown className={clsx("w-2 h-2", isActive && currentDirection === 'desc' ? "text-white" : "text-zinc-600")} />
|
||||||
) : isActive && currentDirection === 'asc' ? (
|
</div>
|
||||||
<ChevronUp className="w-4 h-4" />
|
|
||||||
) : (
|
|
||||||
<ArrowUpDown className="w-3.5 h-3.5" />
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
// MAIN COMPONENT
|
// MAIN PAGE
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
|
|
||||||
export default function MarketPage() {
|
export default function MarketPage() {
|
||||||
@ -324,35 +303,17 @@ export default function MarketPage() {
|
|||||||
// Filter State
|
// Filter State
|
||||||
const [hideSpam, setHideSpam] = useState(true)
|
const [hideSpam, setHideSpam] = useState(true)
|
||||||
const [pounceOnly, setPounceOnly] = useState(false)
|
const [pounceOnly, setPounceOnly] = useState(false)
|
||||||
const [selectedTld, setSelectedTld] = useState('all')
|
|
||||||
const [selectedPrice, setSelectedPrice] = useState('all')
|
|
||||||
const [searchQuery, setSearchQuery] = useState('')
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
|
const [priceRange, setPriceRange] = useState<'all' | 'low' | 'mid' | 'high'>('all')
|
||||||
|
|
||||||
// Sort State
|
// Sort State
|
||||||
const [sortField, setSortField] = useState<SortField>('score')
|
const [sortField, setSortField] = useState<SortField>('score')
|
||||||
const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
|
const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
|
||||||
|
|
||||||
// Watchlist State
|
// Watchlist
|
||||||
const [trackedDomains, setTrackedDomains] = useState<Set<string>>(new Set())
|
const [trackedDomains, setTrackedDomains] = useState<Set<string>>(new Set())
|
||||||
const [trackingInProgress, setTrackingInProgress] = useState<string | null>(null)
|
const [trackingInProgress, setTrackingInProgress] = useState<string | null>(null)
|
||||||
|
|
||||||
// Options
|
|
||||||
const TLD_OPTIONS = [
|
|
||||||
{ value: 'all', label: 'All TLDs' },
|
|
||||||
{ value: 'com', label: '.com' },
|
|
||||||
{ value: 'ai', label: '.ai' },
|
|
||||||
{ value: 'io', label: '.io' },
|
|
||||||
{ value: 'ch', label: '.ch' },
|
|
||||||
{ value: 'net', label: '.net' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const PRICE_OPTIONS = [
|
|
||||||
{ value: 'all', label: 'Any Price' },
|
|
||||||
{ value: '100', label: '< $100' },
|
|
||||||
{ value: '1000', label: '< $1,000' },
|
|
||||||
{ value: '10000', label: 'High Roller' },
|
|
||||||
]
|
|
||||||
|
|
||||||
// Load Data
|
// Load Data
|
||||||
const loadData = useCallback(async () => {
|
const loadData = useCallback(async () => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
@ -381,14 +342,12 @@ export default function MarketPage() {
|
|||||||
setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
|
setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
|
||||||
} else {
|
} else {
|
||||||
setSortField(field)
|
setSortField(field)
|
||||||
// Default direction based on field type
|
|
||||||
setSortDirection(field === 'score' || field === 'price' ? 'desc' : 'asc')
|
setSortDirection(field === 'score' || field === 'price' ? 'desc' : 'asc')
|
||||||
}
|
}
|
||||||
}, [sortField])
|
}, [sortField])
|
||||||
|
|
||||||
const handleTrack = useCallback(async (domain: string) => {
|
const handleTrack = useCallback(async (domain: string) => {
|
||||||
if (trackedDomains.has(domain) || trackingInProgress) return
|
if (trackedDomains.has(domain) || trackingInProgress) return
|
||||||
|
|
||||||
setTrackingInProgress(domain)
|
setTrackingInProgress(domain)
|
||||||
try {
|
try {
|
||||||
await api.addDomain(domain)
|
await api.addDomain(domain)
|
||||||
@ -400,9 +359,8 @@ export default function MarketPage() {
|
|||||||
}
|
}
|
||||||
}, [trackedDomains, trackingInProgress])
|
}, [trackedDomains, trackingInProgress])
|
||||||
|
|
||||||
// Transform and Filter Data
|
// Transform Data
|
||||||
const marketItems = useMemo(() => {
|
const marketItems = useMemo(() => {
|
||||||
// Convert auctions to market items
|
|
||||||
const items: MarketItem[] = auctions.map(auction => ({
|
const items: MarketItem[] = auctions.map(auction => ({
|
||||||
id: `${auction.domain}-${auction.platform}`,
|
id: `${auction.domain}-${auction.platform}`,
|
||||||
domain: auction.domain,
|
domain: auction.domain,
|
||||||
@ -419,368 +377,276 @@ export default function MarketPage() {
|
|||||||
numBids: auction.num_bids,
|
numBids: auction.num_bids,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
// Apply Filters
|
|
||||||
let filtered = items
|
let filtered = items
|
||||||
|
|
||||||
if (hideSpam) {
|
// Filters
|
||||||
filtered = filtered.filter(item => !isSpamDomain(item.domain, item.tld))
|
if (hideSpam) filtered = filtered.filter(item => !isSpamDomain(item.domain, item.tld))
|
||||||
}
|
if (pounceOnly) filtered = filtered.filter(item => item.isPounce)
|
||||||
|
if (priceRange === 'low') filtered = filtered.filter(item => item.price < 100)
|
||||||
if (pounceOnly) {
|
if (priceRange === 'mid') filtered = filtered.filter(item => item.price >= 100 && item.price < 1000)
|
||||||
filtered = filtered.filter(item => item.isPounce)
|
if (priceRange === 'high') filtered = filtered.filter(item => item.price >= 1000)
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedTld !== 'all') {
|
|
||||||
filtered = filtered.filter(item => item.tld === selectedTld)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedPrice !== 'all') {
|
|
||||||
const maxPrice = parseInt(selectedPrice)
|
|
||||||
if (selectedPrice === '10000') {
|
|
||||||
filtered = filtered.filter(item => item.price >= 10000)
|
|
||||||
} else {
|
|
||||||
filtered = filtered.filter(item => item.price < maxPrice)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchQuery) {
|
if (searchQuery) {
|
||||||
const q = searchQuery.toLowerCase()
|
const q = searchQuery.toLowerCase()
|
||||||
filtered = filtered.filter(item => item.domain.toLowerCase().includes(q))
|
filtered = filtered.filter(item => item.domain.toLowerCase().includes(q))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply Sort
|
// Sort
|
||||||
const mult = sortDirection === 'asc' ? 1 : -1
|
const mult = sortDirection === 'asc' ? 1 : -1
|
||||||
filtered.sort((a, b) => {
|
filtered.sort((a, b) => {
|
||||||
switch (sortField) {
|
switch (sortField) {
|
||||||
case 'domain':
|
case 'domain': return mult * a.domain.localeCompare(b.domain)
|
||||||
return mult * a.domain.localeCompare(b.domain)
|
case 'score': return mult * (a.pounceScore - b.pounceScore)
|
||||||
case 'score':
|
case 'price': return mult * (a.price - b.price)
|
||||||
return mult * (a.pounceScore - b.pounceScore)
|
case 'time': return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft))
|
||||||
case 'price':
|
case 'source': return mult * a.source.localeCompare(b.source)
|
||||||
return mult * (a.price - b.price)
|
default: return 0
|
||||||
case 'time':
|
|
||||||
return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft))
|
|
||||||
case 'source':
|
|
||||||
return mult * a.source.localeCompare(b.source)
|
|
||||||
default:
|
|
||||||
return 0
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
return filtered
|
return filtered
|
||||||
}, [auctions, hideSpam, pounceOnly, selectedTld, selectedPrice, searchQuery, sortField, sortDirection])
|
}, [auctions, hideSpam, pounceOnly, priceRange, searchQuery, sortField, sortDirection])
|
||||||
|
|
||||||
// Stats
|
// Stats
|
||||||
const stats = useMemo(() => ({
|
const stats = useMemo(() => ({
|
||||||
total: marketItems.length,
|
total: marketItems.length,
|
||||||
highScore: marketItems.filter(i => i.pounceScore >= 80).length,
|
highScore: marketItems.filter(i => i.pounceScore >= 80).length,
|
||||||
endingSoon: marketItems.filter(i => {
|
endingSoon: marketItems.filter(i => parseTimeToSeconds(i.timeLeft) < 3600).length,
|
||||||
const seconds = parseTimeToSeconds(i.timeLeft)
|
avgPrice: marketItems.length > 0
|
||||||
return seconds < 3600 // Less than 1 hour
|
? Math.round(marketItems.reduce((acc, i) => acc + i.price, 0) / marketItems.length)
|
||||||
}).length,
|
: 0
|
||||||
}), [marketItems])
|
}), [marketItems])
|
||||||
|
|
||||||
// Format currency
|
|
||||||
const formatPrice = (price: number) => {
|
const formatPrice = (price: number) => {
|
||||||
if (price >= 1000000) return `$${(price / 1000000).toFixed(1)}M`
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(price)
|
||||||
if (price >= 1000) return `$${(price / 1000).toFixed(1)}k`
|
|
||||||
return `$${price.toLocaleString()}`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TerminalLayout title="Market" subtitle="">
|
<TerminalLayout title="Market" subtitle="Real-time Domain Auctions">
|
||||||
<div className="space-y-6">
|
<div className="space-y-8">
|
||||||
|
|
||||||
{/* ================================================================ */}
|
{/* ============================================================================ */}
|
||||||
{/* HEADER - Live Feed Style */}
|
{/* METRICS GRID */}
|
||||||
{/* ================================================================ */}
|
{/* ============================================================================ */}
|
||||||
<div className="flex items-center justify-between">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
{/* Left: Title with Live Indicator */}
|
<StatCard
|
||||||
<div className="flex items-center gap-4">
|
label="Active Listings"
|
||||||
<div className="flex items-center gap-3">
|
value={stats.total}
|
||||||
<div className="relative">
|
icon={Activity}
|
||||||
<Activity className="w-5 h-5 text-emerald-400" />
|
trend="neutral"
|
||||||
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-emerald-400 rounded-full animate-pulse" />
|
/>
|
||||||
</div>
|
<StatCard
|
||||||
<div>
|
label="High Potential"
|
||||||
<h1 className="text-lg font-bold text-white">Live Market Feed</h1>
|
value={stats.highScore}
|
||||||
<p className="text-xs text-zinc-500">Updated in real-time</p>
|
subValue="Score 80+"
|
||||||
</div>
|
icon={TrendingUp}
|
||||||
</div>
|
trend="up"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Ending Soon"
|
||||||
|
value={stats.endingSoon}
|
||||||
|
subValue="< 1h"
|
||||||
|
icon={Flame}
|
||||||
|
trend={stats.endingSoon > 5 ? 'down' : 'neutral'}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Avg. Price"
|
||||||
|
value={formatPrice(stats.avgPrice)}
|
||||||
|
icon={Zap}
|
||||||
|
trend="neutral"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Quick Stats Pills */}
|
{/* ============================================================================ */}
|
||||||
<div className="hidden md:flex items-center gap-2">
|
{/* CONTROL BAR */}
|
||||||
<div className="flex items-center gap-1.5 px-3 py-1.5 bg-zinc-800/50 border border-zinc-700/50 rounded-full">
|
{/* ============================================================================ */}
|
||||||
<span className="text-xs text-zinc-400">{stats.total}</span>
|
<div className="flex flex-col md:flex-row items-center gap-4 p-1">
|
||||||
<span className="text-xs text-zinc-600">listings</span>
|
|
||||||
</div>
|
{/* Search */}
|
||||||
<div className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-full">
|
<div className="relative w-full md:w-96 group">
|
||||||
<TrendingUp className="w-3 h-3 text-emerald-400" />
|
<div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
|
||||||
<span className="text-xs text-emerald-400">{stats.highScore}</span>
|
<Search className="w-4 h-4 text-zinc-500 group-focus-within:text-white transition-colors" />
|
||||||
<span className="text-xs text-emerald-400/60">high score</span>
|
|
||||||
</div>
|
|
||||||
{stats.endingSoon > 0 && (
|
|
||||||
<div className="flex items-center gap-1.5 px-3 py-1.5 bg-amber-500/10 border border-amber-500/20 rounded-full">
|
|
||||||
<Flame className="w-3 h-3 text-amber-400" />
|
|
||||||
<span className="text-xs text-amber-400">{stats.endingSoon}</span>
|
|
||||||
<span className="text-xs text-amber-400/60">ending soon</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Search domains..."
|
||||||
|
className="w-full pl-10 pr-4 py-2.5 bg-zinc-900/50 border border-white/5 rounded-lg
|
||||||
|
text-sm text-white placeholder:text-zinc-600
|
||||||
|
focus:outline-none focus:border-white/20 focus:bg-zinc-900 transition-all"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right: Refresh */}
|
<div className="w-px h-6 bg-white/10 hidden md:block" />
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex items-center gap-2 overflow-x-auto w-full md:w-auto pb-2 md:pb-0 scrollbar-hide">
|
||||||
|
<FilterToggle active={hideSpam} onClick={() => setHideSpam(!hideSpam)} label="Hide Spam" />
|
||||||
|
<FilterToggle active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)} label="Pounce Exclusive" />
|
||||||
|
<div className="w-px h-4 bg-white/10 mx-1" />
|
||||||
|
<FilterToggle active={priceRange === 'low'} onClick={() => setPriceRange(p => p === 'low' ? 'all' : 'low')} label="< $100" />
|
||||||
|
<FilterToggle active={priceRange === 'high'} onClick={() => setPriceRange(p => p === 'high' ? 'all' : 'high')} label="$1k+" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1" />
|
||||||
|
|
||||||
|
{/* Refresh */}
|
||||||
<button
|
<button
|
||||||
onClick={handleRefresh}
|
onClick={handleRefresh}
|
||||||
disabled={refreshing}
|
className={clsx(
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-lg
|
"flex items-center gap-2 text-xs font-medium text-zinc-500 hover:text-white transition-colors",
|
||||||
text-sm font-medium text-zinc-400 hover:text-white hover:border-zinc-600 transition-all
|
refreshing && "opacity-50 cursor-not-allowed"
|
||||||
disabled:opacity-50"
|
)}
|
||||||
>
|
>
|
||||||
<RefreshCw className={clsx("w-4 h-4", refreshing && "animate-spin")} />
|
<RefreshCw className={clsx("w-3.5 h-3.5", refreshing && "animate-spin")} />
|
||||||
<span className="hidden sm:inline">Refresh</span>
|
<span className="hidden sm:inline">Refresh Data</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ================================================================ */}
|
{/* ============================================================================ */}
|
||||||
{/* FILTER BAR */}
|
{/* DATA GRID */}
|
||||||
{/* ================================================================ */}
|
{/* ============================================================================ */}
|
||||||
<div className="p-4 bg-zinc-900/50 border border-zinc-800 rounded-xl">
|
<div className="border border-white/5 rounded-xl overflow-hidden bg-zinc-900/20 backdrop-blur-sm">
|
||||||
<div className="flex flex-wrap items-center gap-3">
|
|
||||||
<div className="flex items-center gap-2 text-zinc-500 mr-2">
|
{/* Header */}
|
||||||
<Filter className="w-4 h-4" />
|
<div className="grid grid-cols-12 gap-4 px-6 py-3 border-b border-white/5 bg-zinc-900/50">
|
||||||
<span className="text-sm font-medium hidden sm:inline">Filters</span>
|
<div className="col-span-5 md:col-span-4">
|
||||||
|
<SortableHeader label="Domain Asset" field="domain" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-span-2 hidden md:block text-center">
|
||||||
<ToggleButton active={hideSpam} onClick={() => setHideSpam(!hideSpam)}>
|
<SortableHeader label="Pounce Score" field="score" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
|
||||||
Hide Spam
|
|
||||||
</ToggleButton>
|
|
||||||
|
|
||||||
<ToggleButton active={pounceOnly} onClick={() => setPounceOnly(!pounceOnly)}>
|
|
||||||
<Diamond className="w-3.5 h-3.5" />
|
|
||||||
Pounce Only
|
|
||||||
</ToggleButton>
|
|
||||||
|
|
||||||
<div className="w-px h-8 bg-zinc-700 hidden sm:block" />
|
|
||||||
|
|
||||||
<DropdownSelect
|
|
||||||
value={selectedTld}
|
|
||||||
onChange={setSelectedTld}
|
|
||||||
options={TLD_OPTIONS}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DropdownSelect
|
|
||||||
value={selectedPrice}
|
|
||||||
onChange={setSelectedPrice}
|
|
||||||
options={PRICE_OPTIONS}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
<div className="col-span-3 md:col-span-2 text-right">
|
||||||
</div>
|
<SortableHeader label="Bid Price" field="price" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="right" />
|
||||||
|
|
||||||
{/* ================================================================ */}
|
|
||||||
{/* MARKET TABLE */}
|
|
||||||
{/* ================================================================ */}
|
|
||||||
<div className="bg-zinc-900/30 border border-zinc-800 rounded-xl overflow-hidden">
|
|
||||||
|
|
||||||
{/* Table Header - Sortable */}
|
|
||||||
<div className="grid grid-cols-12 gap-4 px-6 py-4 bg-zinc-900/50 border-b border-zinc-800">
|
|
||||||
<div className="col-span-4">
|
|
||||||
<SortableHeader
|
|
||||||
label="Domain"
|
|
||||||
field="domain"
|
|
||||||
currentSort={sortField}
|
|
||||||
currentDirection={sortDirection}
|
|
||||||
onSort={handleSort}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-1 hidden lg:block">
|
<div className="col-span-2 hidden lg:block text-center">
|
||||||
<SortableHeader
|
<SortableHeader label="Time Left" field="time" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
|
||||||
label="Score"
|
|
||||||
field="score"
|
|
||||||
currentSort={sortField}
|
|
||||||
currentDirection={sortDirection}
|
|
||||||
onSort={handleSort}
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2 hidden xl:block text-center">
|
||||||
<SortableHeader
|
<SortableHeader label="Source" field="source" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" />
|
||||||
label="Price"
|
|
||||||
field="price"
|
|
||||||
currentSort={sortField}
|
|
||||||
currentDirection={sortDirection}
|
|
||||||
onSort={handleSort}
|
|
||||||
align="right"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-2 hidden md:block">
|
<div className="col-span-4 md:col-span-2 xl:col-span-2 text-right">
|
||||||
<SortableHeader
|
<span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600">Action</span>
|
||||||
label="Time Left"
|
|
||||||
field="time"
|
|
||||||
currentSort={sortField}
|
|
||||||
currentDirection={sortDirection}
|
|
||||||
onSort={handleSort}
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 hidden lg:block">
|
|
||||||
<SortableHeader
|
|
||||||
label="Source"
|
|
||||||
field="source"
|
|
||||||
currentSort={sortField}
|
|
||||||
currentDirection={sortDirection}
|
|
||||||
onSort={handleSort}
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-2 text-right">
|
|
||||||
<span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Action</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table Body */}
|
{/* Body */}
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="flex items-center justify-center py-20">
|
<div className="flex flex-col items-center justify-center py-32 space-y-4">
|
||||||
<Loader2 className="w-6 h-6 text-emerald-500 animate-spin" />
|
<Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
|
||||||
|
<p className="text-zinc-500 text-sm animate-pulse">Scanning global markets...</p>
|
||||||
</div>
|
</div>
|
||||||
) : marketItems.length === 0 ? (
|
) : marketItems.length === 0 ? (
|
||||||
<div className="text-center py-20">
|
<div className="flex flex-col items-center justify-center py-32 text-center">
|
||||||
<TrendingUp className="w-12 h-12 text-zinc-700 mx-auto mb-4" />
|
<div className="w-16 h-16 bg-zinc-900 rounded-full flex items-center justify-center mb-4 border border-zinc-800">
|
||||||
<p className="text-zinc-500 font-medium">No domains match your filters</p>
|
<Search className="w-6 h-6 text-zinc-600" />
|
||||||
<p className="text-zinc-600 text-sm mt-1">Try adjusting your filter settings</p>
|
</div>
|
||||||
|
<h3 className="text-white font-medium mb-1">No assets found</h3>
|
||||||
|
<p className="text-zinc-500 text-sm">Adjust filters to see more results</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="divide-y divide-zinc-800/50">
|
<div className="divide-y divide-white/5">
|
||||||
{marketItems.map((item) => (
|
{marketItems.map((item) => {
|
||||||
<div
|
const timeLeftSec = parseTimeToSeconds(item.timeLeft)
|
||||||
key={item.id}
|
const isUrgent = timeLeftSec < 3600
|
||||||
className={clsx(
|
|
||||||
"grid grid-cols-12 gap-4 px-6 py-4 items-center transition-colors",
|
return (
|
||||||
item.isPounce
|
<div
|
||||||
? "bg-emerald-500/[0.03] hover:bg-emerald-500/[0.06]"
|
key={item.id}
|
||||||
: "hover:bg-zinc-800/30"
|
className="grid grid-cols-12 gap-4 px-6 py-3.5 items-center hover:bg-white/[0.02] transition-colors group"
|
||||||
)}
|
>
|
||||||
>
|
{/* Domain */}
|
||||||
{/* Domain */}
|
<div className="col-span-5 md:col-span-4 min-w-0">
|
||||||
<div className="col-span-4">
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className={clsx(
|
||||||
{item.isPounce && (
|
"w-1.5 h-1.5 rounded-full flex-shrink-0",
|
||||||
<Diamond className="w-4 h-4 text-emerald-400 flex-shrink-0" />
|
item.isPounce ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" : "bg-zinc-700"
|
||||||
)}
|
)} />
|
||||||
<div>
|
<div className="truncate">
|
||||||
<span className="font-mono font-semibold text-white">{item.domain}</span>
|
<div className="flex items-baseline gap-0.5 truncate">
|
||||||
{item.verified && (
|
<span className="font-medium text-white text-[15px] tracking-tight">{item.domain.split('.')[0]}</span>
|
||||||
<span className="ml-2 text-xs bg-emerald-500/20 text-emerald-400 px-1.5 py-0.5 rounded">
|
<span className="text-zinc-500 text-sm">.{item.tld}</span>
|
||||||
✓ Verified
|
</div>
|
||||||
</span>
|
<div className="flex items-center gap-2 mt-0.5 lg:hidden">
|
||||||
)}
|
<span className={clsx("text-xs", item.pounceScore >= 80 ? "text-emerald-400" : "text-zinc-500")}>
|
||||||
{/* Mobile: Show score inline */}
|
Score {item.pounceScore}
|
||||||
<div className="flex items-center gap-2 mt-1 lg:hidden">
|
</span>
|
||||||
<ScoreBadge score={item.pounceScore} />
|
<span className="text-zinc-700 text-[10px]">•</span>
|
||||||
<SourceBadge source={item.source} isPounce={item.isPounce} />
|
<span className={clsx("text-xs", isUrgent ? "text-red-400" : "text-zinc-500")}>
|
||||||
|
{item.timeLeft}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pounce Score */}
|
{/* Score */}
|
||||||
<div className="col-span-1 hidden lg:flex justify-center">
|
<div className="col-span-2 hidden md:flex justify-center">
|
||||||
<ScoreBadge score={item.pounceScore} />
|
<ScoreRing score={item.pounceScore} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Price / Bid */}
|
{/* Price */}
|
||||||
<div className="col-span-2 text-right">
|
<div className="col-span-3 md:col-span-2 text-right">
|
||||||
<span className="font-semibold text-white font-mono">
|
<div className="font-mono text-white font-medium tracking-tight">
|
||||||
{formatPrice(item.price)}
|
{formatPrice(item.price)}
|
||||||
</span>
|
</div>
|
||||||
{item.priceType === 'bid' && (
|
{item.numBids !== undefined && item.numBids > 0 && (
|
||||||
<span className="text-zinc-500 text-xs ml-1">(bid)</span>
|
<div className="text-[11px] text-zinc-500 mt-0.5">
|
||||||
)}
|
{item.numBids} bids
|
||||||
{item.numBids && item.numBids > 0 && (
|
</div>
|
||||||
<p className="text-xs text-zinc-500 mt-0.5">{item.numBids} bids</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status / Time */}
|
|
||||||
<div className="col-span-2 hidden md:flex justify-center">
|
|
||||||
<StatusBadge status={item.status} timeLeft={item.timeLeft} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Source */}
|
|
||||||
<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 */}
|
|
||||||
<button
|
|
||||||
onClick={() => handleTrack(item.domain)}
|
|
||||||
disabled={trackedDomains.has(item.domain) || trackingInProgress === item.domain}
|
|
||||||
className={clsx(
|
|
||||||
"p-2 rounded-lg 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"
|
|
||||||
)}
|
)}
|
||||||
title={trackedDomains.has(item.domain) ? 'Tracked' : 'Add to Watchlist'}
|
</div>
|
||||||
>
|
|
||||||
{trackingInProgress === item.domain ? (
|
|
||||||
<Loader2 className="w-4 h-4 animate-spin" />
|
|
||||||
) : trackedDomains.has(item.domain) ? (
|
|
||||||
<Check className="w-4 h-4" />
|
|
||||||
) : (
|
|
||||||
<Plus className="w-4 h-4" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Action Button */}
|
{/* Time */}
|
||||||
<a
|
<div className="col-span-2 hidden lg:flex justify-center">
|
||||||
href={item.affiliateUrl || '#'}
|
<div className={clsx(
|
||||||
target="_blank"
|
"flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border",
|
||||||
rel="noopener noreferrer"
|
isUrgent
|
||||||
className={clsx(
|
? "bg-red-500/10 text-red-400 border-red-500/20"
|
||||||
"inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all",
|
: "bg-zinc-900 border-zinc-800 text-zinc-400"
|
||||||
item.isPounce
|
)}>
|
||||||
? "bg-emerald-500 text-black hover:bg-emerald-400"
|
<Clock className="w-3 h-3" />
|
||||||
: "bg-white text-black hover:bg-zinc-200"
|
{item.timeLeft}
|
||||||
)}
|
</div>
|
||||||
>
|
</div>
|
||||||
{item.isPounce ? 'Buy' : 'Bid'}
|
|
||||||
<ExternalLink className="w-3.5 h-3.5" />
|
{/* Source */}
|
||||||
</a>
|
<div className="col-span-2 hidden xl:flex justify-center">
|
||||||
|
<SourceBadge source={item.source} isPounce={item.isPounce} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action */}
|
||||||
|
<div className="col-span-4 md:col-span-2 xl:col-span-2 flex items-center justify-end gap-2 opacity-100 lg:opacity-60 lg:group-hover:opacity-100 transition-opacity">
|
||||||
|
<button
|
||||||
|
onClick={() => handleTrack(item.domain)}
|
||||||
|
disabled={trackedDomains.has(item.domain)}
|
||||||
|
className={clsx(
|
||||||
|
"w-8 h-8 flex items-center justify-center rounded-lg border transition-all",
|
||||||
|
trackedDomains.has(item.domain)
|
||||||
|
? "bg-emerald-500 text-white border-emerald-500"
|
||||||
|
: "border-zinc-700 text-zinc-400 hover:text-white hover:border-zinc-500 hover:bg-zinc-800"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{trackedDomains.has(item.domain) ? <Check className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={item.affiliateUrl || '#'}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="h-8 px-3 flex items-center gap-2 bg-white text-zinc-950 rounded-lg text-xs font-semibold hover:bg-zinc-200 transition-colors"
|
||||||
|
>
|
||||||
|
{item.isPounce ? 'Buy' : 'Bid'}
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
))}
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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 className="flex items-center gap-1.5">
|
|
||||||
<Clock className="w-3.5 h-3.5" />
|
|
||||||
Data from GoDaddy, Sedo, NameJet, DropCatch
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</TerminalLayout>
|
</TerminalLayout>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user