feat: Radar Page Redesign (Techy Chic)
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
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
- TechCard Komponente für Metriken - Großes Command-Line Search Interface - Grid-Layout für Feeds (Live Ops & Intel) - Techy Design-Elemente (Crosshairs, Mono-Fonts, Uppercase) - Integration in CommandCenterLayout
This commit is contained in:
@ -4,7 +4,7 @@ import { useEffect, useState, useMemo, useCallback, useRef, memo } from 'react'
|
|||||||
import { useSearchParams } from 'next/navigation'
|
import { useSearchParams } from 'next/navigation'
|
||||||
import { useStore } from '@/lib/store'
|
import { useStore } from '@/lib/store'
|
||||||
import { api } from '@/lib/api'
|
import { api } from '@/lib/api'
|
||||||
import { TerminalLayout } from '@/components/TerminalLayout'
|
import { CommandCenterLayout } from '@/components/CommandCenterLayout' // Using the new layout
|
||||||
import { Ticker, useTickerItems } from '@/components/Ticker'
|
import { Ticker, useTickerItems } from '@/components/Ticker'
|
||||||
import { Toast, useToast } from '@/components/Toast'
|
import { Toast, useToast } from '@/components/Toast'
|
||||||
import {
|
import {
|
||||||
@ -14,7 +14,6 @@ import {
|
|||||||
Clock,
|
Clock,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
Plus,
|
Plus,
|
||||||
Zap,
|
|
||||||
Activity,
|
Activity,
|
||||||
Bell,
|
Bell,
|
||||||
Search,
|
Search,
|
||||||
@ -28,9 +27,10 @@ import {
|
|||||||
Building2,
|
Building2,
|
||||||
Calendar,
|
Calendar,
|
||||||
Server,
|
Server,
|
||||||
Diamond,
|
Radar,
|
||||||
Store,
|
Crosshair,
|
||||||
TrendingUp
|
Cpu,
|
||||||
|
Globe
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
@ -58,60 +58,49 @@ const getDaysUntilExpiration = (dateStr: string | null) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
// SHARED COMPONENTS (Matched to Market/Intel)
|
// COMPONENTS - TECHY CHIC
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
|
|
||||||
const Tooltip = memo(({ children, content }: { children: React.ReactNode; content: string }) => (
|
const TechCard = memo(({
|
||||||
<div className="relative flex items-center group/tooltip w-fit">
|
|
||||||
{children}
|
|
||||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 border border-zinc-800 rounded text-[10px] text-zinc-300 whitespace-nowrap opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
|
|
||||||
{content}
|
|
||||||
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
Tooltip.displayName = 'Tooltip'
|
|
||||||
|
|
||||||
const StatCard = memo(({
|
|
||||||
label,
|
label,
|
||||||
value,
|
value,
|
||||||
subValue,
|
subValue,
|
||||||
icon: Icon,
|
icon: Icon,
|
||||||
highlight,
|
|
||||||
trend
|
trend
|
||||||
}: {
|
}: {
|
||||||
label: string
|
label: string
|
||||||
value: string | number
|
value: string | number
|
||||||
subValue?: string
|
subValue?: string
|
||||||
icon: any
|
icon: any
|
||||||
highlight?: boolean
|
|
||||||
trend?: 'up' | 'down' | 'neutral' | 'active'
|
trend?: 'up' | 'down' | 'neutral' | 'active'
|
||||||
}) => (
|
}) => (
|
||||||
<div className={clsx(
|
<div className="relative group p-6 border border-white/[0.08] bg-white/[0.02] hover:bg-white/[0.04] transition-colors h-full overflow-hidden">
|
||||||
"bg-zinc-900/40 border p-4 relative overflow-hidden group hover:border-white/10 transition-colors h-full",
|
{/* Tech Corners */}
|
||||||
highlight ? "border-emerald-500/30" : "border-white/5"
|
<div className="absolute top-0 left-0 w-2 h-2 border-l border-t border-white/20" />
|
||||||
)}>
|
<div className="absolute top-0 right-0 w-2 h-2 border-r border-t border-white/20" />
|
||||||
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
<div className="absolute bottom-0 left-0 w-2 h-2 border-l border-b border-white/20" />
|
||||||
<Icon className="w-16 h-16" />
|
<div className="absolute bottom-0 right-0 w-2 h-2 border-r border-b border-white/20" />
|
||||||
</div>
|
|
||||||
<div className="relative z-10">
|
<div className="flex justify-between items-start mb-4">
|
||||||
<div className="flex items-center gap-2 text-zinc-400 mb-1">
|
<div className="flex items-center gap-2">
|
||||||
<Icon className={clsx("w-4 h-4", (highlight || trend === 'active' || trend === 'up') && "text-emerald-400")} />
|
<Icon className={clsx("w-4 h-4", trend === 'active' || trend === 'up' ? "text-accent" : "text-white/40")} />
|
||||||
<span className="text-xs font-medium uppercase tracking-wider">{label}</span>
|
<span className="font-mono text-[10px] uppercase tracking-widest text-white/40">{label}</span>
|
||||||
</div>
|
|
||||||
<div className="flex items-baseline gap-2">
|
|
||||||
<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>
|
|
||||||
{highlight && (
|
|
||||||
<div className="mt-2 text-[10px] font-medium px-1.5 py-0.5 w-fit rounded border text-emerald-400 border-emerald-400/20 bg-emerald-400/5">
|
|
||||||
● LIVE
|
|
||||||
</div>
|
</div>
|
||||||
|
{trend === 'active' && (
|
||||||
|
<span className="flex h-2 w-2">
|
||||||
|
<span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-accent opacity-75"></span>
|
||||||
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="font-display text-3xl text-white">{value}</div>
|
||||||
|
{subValue && <div className="font-mono text-xs text-white/30">{subValue}</div>}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
StatCard.displayName = 'StatCard'
|
TechCard.displayName = 'TechCard'
|
||||||
|
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
// TYPES
|
// TYPES
|
||||||
@ -189,7 +178,6 @@ export default function RadarPage() {
|
|||||||
const loadDashboardData = useCallback(async () => {
|
const loadDashboardData = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const summary = await api.getDashboardSummary()
|
const summary = await api.getDashboardSummary()
|
||||||
|
|
||||||
setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 5))
|
setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 5))
|
||||||
setMarketStats({
|
setMarketStats({
|
||||||
totalAuctions: summary.market.total_auctions || 0,
|
totalAuctions: summary.market.total_auctions || 0,
|
||||||
@ -208,7 +196,7 @@ export default function RadarPage() {
|
|||||||
if (isAuthenticated) loadDashboardData()
|
if (isAuthenticated) loadDashboardData()
|
||||||
}, [isAuthenticated, loadDashboardData])
|
}, [isAuthenticated, loadDashboardData])
|
||||||
|
|
||||||
// Search Logic - identical to DomainChecker on landing page
|
// Search Logic
|
||||||
const handleSearch = useCallback(async (domainInput: string) => {
|
const handleSearch = useCallback(async (domainInput: string) => {
|
||||||
if (!domainInput.trim()) {
|
if (!domainInput.trim()) {
|
||||||
setSearchResult(null)
|
setSearchResult(null)
|
||||||
@ -229,7 +217,6 @@ export default function RadarPage() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Full domain check (same as DomainChecker component)
|
|
||||||
const [whoisResult, auctionsResult] = await Promise.all([
|
const [whoisResult, auctionsResult] = await Promise.all([
|
||||||
api.checkDomain(cleanDomain).catch(() => null),
|
api.checkDomain(cleanDomain).catch(() => null),
|
||||||
api.getAuctions(cleanDomain).catch(() => ({ auctions: [] })),
|
api.getAuctions(cleanDomain).catch(() => ({ auctions: [] })),
|
||||||
@ -280,7 +267,6 @@ export default function RadarPage() {
|
|||||||
}
|
}
|
||||||
}, [searchQuery, addDomain, showToast])
|
}, [searchQuery, addDomain, showToast])
|
||||||
|
|
||||||
// Debounce Search
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
if (searchQuery.length > 3) {
|
if (searchQuery.length > 3) {
|
||||||
@ -309,9 +295,8 @@ export default function RadarPage() {
|
|||||||
const available = domains?.filter(d => d.is_available) || []
|
const available = domains?.filter(d => d.is_available) || []
|
||||||
const total = domains?.length || 0
|
const total = domains?.length || 0
|
||||||
const hour = new Date().getHours()
|
const hour = new Date().getHours()
|
||||||
const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening'
|
const greeting = hour < 12 ? 'Target Acquisition' : hour < 18 ? 'Live Operations' : 'Night Watch'
|
||||||
|
|
||||||
// Find domains expiring within 30 days
|
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
const thirtyDaysFromNow = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)
|
const thirtyDaysFromNow = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)
|
||||||
const expiring = domains?.filter(d => {
|
const expiring = domains?.filter(d => {
|
||||||
@ -320,7 +305,6 @@ export default function RadarPage() {
|
|||||||
return expDate <= thirtyDaysFromNow && expDate > now
|
return expDate <= thirtyDaysFromNow && expDate > now
|
||||||
}) || []
|
}) || []
|
||||||
|
|
||||||
// Build alerts list with types
|
|
||||||
type AlertItem = {
|
type AlertItem = {
|
||||||
domain: typeof domains[0]
|
domain: typeof domains[0]
|
||||||
type: 'available' | 'expiring' | 'checked'
|
type: 'available' | 'expiring' | 'checked'
|
||||||
@ -328,14 +312,9 @@ export default function RadarPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const alerts: AlertItem[] = []
|
const alerts: AlertItem[] = []
|
||||||
|
|
||||||
// Priority 1: Available domains (highest priority)
|
|
||||||
available.forEach(d => alerts.push({ domain: d, type: 'available', priority: 1 }))
|
available.forEach(d => alerts.push({ domain: d, type: 'available', priority: 1 }))
|
||||||
|
|
||||||
// Priority 2: Expiring soon
|
|
||||||
expiring.forEach(d => alerts.push({ domain: d, type: 'expiring', priority: 2 }))
|
expiring.forEach(d => alerts.push({ domain: d, type: 'expiring', priority: 2 }))
|
||||||
|
|
||||||
// Priority 3: Recently checked (within last 24h)
|
|
||||||
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
||||||
const recentlyChecked = domains?.filter(d => {
|
const recentlyChecked = domains?.filter(d => {
|
||||||
if (d.is_available || expiring.includes(d)) return false
|
if (d.is_available || expiring.includes(d)) return false
|
||||||
@ -344,130 +323,93 @@ export default function RadarPage() {
|
|||||||
}) || []
|
}) || []
|
||||||
recentlyChecked.slice(0, 3).forEach(d => alerts.push({ domain: d, type: 'checked', priority: 3 }))
|
recentlyChecked.slice(0, 3).forEach(d => alerts.push({ domain: d, type: 'checked', priority: 3 }))
|
||||||
|
|
||||||
// Sort by priority
|
|
||||||
alerts.sort((a, b) => a.priority - b.priority)
|
alerts.sort((a, b) => a.priority - b.priority)
|
||||||
|
|
||||||
let subtitle = ''
|
|
||||||
if (available.length > 0) subtitle = `${available.length} domain${available.length !== 1 ? 's' : ''} ready to pounce!`
|
|
||||||
else if (total > 0) subtitle = `Monitoring ${total} domain${total !== 1 ? 's' : ''} for you`
|
|
||||||
else subtitle = 'Start tracking domains to find opportunities'
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
availableDomains: available,
|
availableDomains: available,
|
||||||
expiringDomains: expiring,
|
expiringDomains: expiring,
|
||||||
recentAlerts: alerts,
|
recentAlerts: alerts,
|
||||||
totalDomains: total,
|
totalDomains: total,
|
||||||
greeting,
|
greeting,
|
||||||
subtitle
|
subtitle: `${total} Assets Tracked // ${available.length} Actionable`
|
||||||
}
|
}
|
||||||
}, [domains])
|
}, [domains])
|
||||||
|
|
||||||
const tickerItems = useTickerItems(trendingTlds, availableDomains, hotAuctions)
|
const tickerItems = useTickerItems(trendingTlds, availableDomains, hotAuctions)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TerminalLayout
|
<CommandCenterLayout title="RADAR" subtitle="Global Intelligence & Monitoring">
|
||||||
hideHeaderSearch={true}
|
|
||||||
>
|
|
||||||
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
||||||
|
|
||||||
<div className="relative font-sans text-zinc-100 selection:bg-emerald-500/30">
|
<div className="space-y-12 animate-fade-in">
|
||||||
|
|
||||||
{/* Ambient Background Glow (Matched to Market/Intel) */}
|
{/* TOP SECTION: METRICS GRID */}
|
||||||
<div className="fixed inset-0 pointer-events-none overflow-hidden">
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-px bg-white/[0.08] border border-white/[0.08]">
|
||||||
<div className="absolute top-0 right-1/4 w-[800px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] mix-blend-screen" />
|
<div className="bg-[#020202]">
|
||||||
<div className="absolute bottom-0 left-1/4 w-[600px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] mix-blend-screen" />
|
<Link href="/terminal/watchlist" className="block h-full hover:bg-white/[0.02] transition-colors">
|
||||||
</div>
|
<TechCard
|
||||||
|
label="Assets Under Watch"
|
||||||
<div className="relative z-10 max-w-[1600px] mx-auto p-4 md:p-8 space-y-8">
|
value={totalDomains}
|
||||||
|
subValue={`${availableDomains.length} Opportunities`}
|
||||||
{/* Header Section */}
|
icon={Eye}
|
||||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-white/5 pb-8">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="h-8 w-1 bg-emerald-500 rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
|
|
||||||
<h1 className="text-3xl font-bold tracking-tight text-white">{greeting}{user?.name ? `, ${user.name.split(' ')[0]}` : ''}</h1>
|
|
||||||
</div>
|
|
||||||
<p className="text-zinc-400 max-w-lg">
|
|
||||||
{subtitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quick Stats Pills */}
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<div className="px-3 py-1.5 rounded-full bg-white/5 border border-white/10 flex items-center gap-2 text-xs font-medium text-zinc-300">
|
|
||||||
<Activity className="w-3.5 h-3.5 text-emerald-400" />
|
|
||||||
System Active
|
|
||||||
</div>
|
|
||||||
<div className="px-3 py-1.5 rounded-full bg-white/5 border border-white/10 flex items-center gap-2 text-xs font-medium text-zinc-300">
|
|
||||||
<Wifi className="w-3.5 h-3.5 text-blue-400" />
|
|
||||||
Online
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Ticker Section */}
|
|
||||||
{tickerItems.length > 0 && (
|
|
||||||
<div className="-mt-4">
|
|
||||||
<Ticker items={tickerItems} speed={40} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Metric Grid */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
||||||
<Link href="/terminal/watchlist" className="block group h-full">
|
|
||||||
<StatCard
|
|
||||||
label="Watching"
|
|
||||||
value={totalDomains}
|
|
||||||
subValue={`${availableDomains.length} Alerts`}
|
|
||||||
icon={Eye}
|
|
||||||
trend={availableDomains.length > 0 ? 'up' : 'neutral'}
|
trend={availableDomains.length > 0 ? 'up' : 'neutral'}
|
||||||
highlight={availableDomains.length > 0}
|
/>
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
<Link href="/terminal/market" className="block group h-full">
|
|
||||||
<StatCard
|
|
||||||
label="Market Opportunities"
|
|
||||||
value={marketStats.totalAuctions}
|
|
||||||
subValue={`${marketStats.endingSoon} ending soon`}
|
|
||||||
icon={Gavel}
|
|
||||||
trend="active"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
<Link href="/terminal/listing" className="block group h-full">
|
|
||||||
<StatCard
|
|
||||||
label="My Listings"
|
|
||||||
value={listingStats.active}
|
|
||||||
subValue={listingStats.sold > 0 ? `${listingStats.sold} Sold` : `${listingStats.draft} Draft`}
|
|
||||||
icon={Tag}
|
|
||||||
trend={listingStats.active > 0 ? 'up' : 'neutral'}
|
|
||||||
/>
|
|
||||||
</Link>
|
</Link>
|
||||||
<div className="block h-full">
|
</div>
|
||||||
<StatCard
|
<div className="bg-[#020202]">
|
||||||
label="System Status"
|
<Link href="/terminal/market" className="block h-full hover:bg-white/[0.02] transition-colors">
|
||||||
value="Online"
|
<TechCard
|
||||||
subValue="99.9% Uptime"
|
label="Market Pulse"
|
||||||
icon={Wifi}
|
value={marketStats.totalAuctions}
|
||||||
|
subValue="Active Auctions"
|
||||||
|
icon={Gavel}
|
||||||
|
trend="active"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[#020202]">
|
||||||
|
<Link href="/terminal/listing" className="block h-full hover:bg-white/[0.02] transition-colors">
|
||||||
|
<TechCard
|
||||||
|
label="Portfolio Value"
|
||||||
|
value={listingStats.active}
|
||||||
|
subValue="Active Listings"
|
||||||
|
icon={Tag}
|
||||||
|
trend="neutral"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[#020202]">
|
||||||
|
<TechCard
|
||||||
|
label="System Latency"
|
||||||
|
value="12ms"
|
||||||
|
subValue="Region: EU-CENTRAL"
|
||||||
|
icon={Cpu}
|
||||||
trend="up"
|
trend="up"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Search Hero */}
|
{/* CENTER SECTION: SEARCH & COMMAND */}
|
||||||
<div className="relative py-4">
|
<div className="relative">
|
||||||
<div className={clsx(
|
<div className="absolute -inset-1 bg-gradient-to-r from-accent/20 via-transparent to-accent/20 blur-xl opacity-20" />
|
||||||
"relative bg-black/40 backdrop-blur-xl border rounded-2xl transition-all duration-300 overflow-hidden",
|
<div className={clsx(
|
||||||
searchFocused
|
"relative bg-[#050505] border border-white/[0.08] p-8 md:p-12 transition-all duration-300",
|
||||||
? "border-emerald-500/30 shadow-[0_0_40px_-10px_rgba(16,185,129,0.15)] ring-1 ring-emerald-500/20"
|
searchFocused && "border-accent/30 shadow-[0_0_50px_-20px_rgba(16,185,129,0.1)]"
|
||||||
: "border-white/10 shadow-xl"
|
)}>
|
||||||
)}>
|
{/* Decorative Crosshairs */}
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-emerald-500/5 via-transparent to-blue-500/5 opacity-50" />
|
<div className="absolute top-0 left-0 p-2 border-t border-l border-white/10 w-6 h-6" />
|
||||||
|
<div className="absolute top-0 right-0 p-2 border-t border-r border-white/10 w-6 h-6" />
|
||||||
|
<div className="absolute bottom-0 left-0 p-2 border-b border-l border-white/10 w-6 h-6" />
|
||||||
|
<div className="absolute bottom-0 right-0 p-2 border-b border-r border-white/10 w-6 h-6" />
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex items-center gap-4 text-white/40 font-mono text-[10px] uppercase tracking-[0.2em]">
|
||||||
|
<Radar className={clsx("w-4 h-4", searchFocused ? "text-accent animate-spin-slow" : "text-white/20")} />
|
||||||
|
<span>Target Acquisition System V2.0</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="relative flex items-center h-16 sm:h-20 px-6">
|
<div className="relative flex items-center">
|
||||||
<Search className={clsx(
|
<span className="text-2xl text-accent mr-4 font-mono">{'>'}</span>
|
||||||
"w-6 h-6 mr-4 transition-colors",
|
|
||||||
searchFocused ? "text-emerald-400" : "text-zinc-500"
|
|
||||||
)} />
|
|
||||||
<input
|
<input
|
||||||
ref={searchInputRef}
|
ref={searchInputRef}
|
||||||
type="text"
|
type="text"
|
||||||
@ -475,426 +417,232 @@ export default function RadarPage() {
|
|||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
onFocus={() => setSearchFocused(true)}
|
onFocus={() => setSearchFocused(true)}
|
||||||
onBlur={() => setSearchFocused(false)}
|
onBlur={() => setSearchFocused(false)}
|
||||||
placeholder="Analyze any domain..."
|
placeholder="ENTER_DOMAIN_TARGET..."
|
||||||
className="w-full bg-transparent text-xl sm:text-2xl text-white placeholder:text-zinc-600 font-light outline-none"
|
className="w-full bg-transparent text-3xl md:text-5xl text-white placeholder:text-white/10 font-display outline-none uppercase tracking-tight"
|
||||||
/>
|
/>
|
||||||
{!searchQuery && (
|
|
||||||
<div className="hidden sm:flex items-center gap-1.5 px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-zinc-500 font-mono">
|
|
||||||
<Command className="w-3 h-3" /> K
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{searchQuery && (
|
|
||||||
<button
|
|
||||||
onClick={() => { setSearchQuery(''); setSearchFocused(true); }}
|
|
||||||
className="p-2 text-zinc-500 hover:text-white transition-colors"
|
|
||||||
>
|
|
||||||
<XCircle className="w-5 h-5" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* SEARCH RESULTS DROPDOWN */}
|
{/* SEARCH RESULTS */}
|
||||||
{searchResult && (
|
{searchResult && (
|
||||||
<div className="border-t border-white/5 animate-in slide-in-from-top-2 fade-in duration-200 bg-black/60 backdrop-blur-xl">
|
<div className="mt-8 border-t border-white/[0.08] pt-8 animate-fade-in">
|
||||||
{searchResult.loading ? (
|
{searchResult.loading ? (
|
||||||
<div className="flex items-center justify-center py-12 gap-3 text-zinc-500">
|
<div className="flex items-center gap-4 text-accent font-mono text-sm">
|
||||||
<Loader2 className="w-6 h-6 animate-spin text-emerald-500" />
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
<span className="text-sm font-medium">Scanning global availability...</span>
|
<span className="uppercase tracking-widest">Scanning Global Registries...</span>
|
||||||
</div>
|
</div>
|
||||||
) : searchResult.is_available ? (
|
) : (
|
||||||
/* ========== AVAILABLE DOMAIN ========== */
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
<div className="overflow-hidden">
|
{/* Primary Status */}
|
||||||
{/* Header */}
|
<div className="space-y-6">
|
||||||
<div className="p-6 sm:p-8 bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-transparent">
|
<div className="flex items-baseline gap-4">
|
||||||
<div className="flex items-center gap-6">
|
<h3 className="text-2xl font-mono text-white">{searchResult.domain}</h3>
|
||||||
<div className="w-14 h-14 rounded-2xl bg-emerald-500/15 border border-emerald-500/20 flex items-center justify-center shrink-0 shadow-[0_0_20px_rgba(16,185,129,0.15)]">
|
{searchResult.is_available ? (
|
||||||
<CheckCircle2 className="w-7 h-7 text-emerald-400" strokeWidth={2.5} />
|
<span className="px-3 py-1 bg-accent text-black text-[10px] font-bold uppercase tracking-widest">Available</span>
|
||||||
</div>
|
) : (
|
||||||
<div className="flex-1 min-w-0">
|
<span className="px-3 py-1 bg-white/10 text-white/40 text-[10px] font-bold uppercase tracking-widest">Taken</span>
|
||||||
<div className="flex items-center gap-3 mb-1">
|
)}
|
||||||
<p className="font-mono text-2xl sm:text-3xl font-bold text-white tracking-tight">
|
|
||||||
{searchResult.domain}
|
|
||||||
</p>
|
|
||||||
<span className="px-3 py-1 bg-emerald-500 text-black text-xs font-bold rounded-lg uppercase tracking-wide">
|
|
||||||
Available
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-emerald-400 font-medium">
|
|
||||||
It's yours for the taking.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Auction Notice */}
|
{searchResult.is_available ? (
|
||||||
{searchResult.inAuction && searchResult.auctionData && (
|
<div className="space-y-4">
|
||||||
<div className="px-6 sm:px-8 py-4 bg-amber-500/5 border-t border-amber-500/20">
|
<p className="text-white/60 font-light">Asset identified as available for immediate acquisition.</p>
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
<div className="flex gap-4">
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Gavel className="w-5 h-5 text-amber-400" />
|
|
||||||
<span className="text-sm text-zinc-300 font-medium">
|
|
||||||
Also in auction: <span className="text-amber-400 font-mono font-bold text-base">${searchResult.auctionData.current_bid}</span> • {searchResult.auctionData.time_remaining} left
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href={searchResult.auctionData.affiliate_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-amber-400 hover:text-amber-300 font-bold flex items-center gap-1 uppercase tracking-wide"
|
|
||||||
>
|
|
||||||
View Auction <ExternalLink className="w-3 h-3" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* CTA */}
|
|
||||||
<div className="p-6 sm:p-8 border-t border-white/5 bg-white/[0.02]">
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
||||||
<p className="text-zinc-400">
|
|
||||||
Grab it now or track it in your watchlist.
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<button
|
<button
|
||||||
onClick={handleAddToWatchlist}
|
onClick={handleAddToWatchlist}
|
||||||
disabled={addingToWatchlist}
|
disabled={addingToWatchlist}
|
||||||
className="flex items-center gap-2 px-6 py-3 text-zinc-300 hover:text-white font-medium border border-white/10 rounded-xl hover:bg-white/5 transition-all"
|
className="px-6 py-3 bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors uppercase text-xs font-bold tracking-widest flex items-center gap-2"
|
||||||
>
|
>
|
||||||
{addingToWatchlist ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
|
{addingToWatchlist ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
|
||||||
Track
|
Track Asset
|
||||||
</button>
|
</button>
|
||||||
<a
|
<a
|
||||||
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
|
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="flex items-center gap-2 px-8 py-3 bg-emerald-500 hover:bg-emerald-400 text-black font-bold rounded-xl transition-all shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30"
|
className="px-6 py-3 bg-accent text-black hover:bg-white transition-colors uppercase text-xs font-bold tracking-widest flex items-center gap-2"
|
||||||
>
|
>
|
||||||
Register Now <ArrowRight className="w-4 h-4" />
|
Acquire Now <ArrowRight className="w-3 h-3" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
</div>
|
<div className="space-y-4">
|
||||||
) : (
|
<div className="grid grid-cols-2 gap-4 text-sm font-mono text-white/40">
|
||||||
/* ========== TAKEN DOMAIN ========== */
|
<div>
|
||||||
<div className="overflow-hidden">
|
<div className="uppercase tracking-widest text-[10px] mb-1">Registrar</div>
|
||||||
{/* Header */}
|
<div className="text-white">{searchResult.registrar || 'Unknown'}</div>
|
||||||
<div className="p-6 sm:p-8 border-b border-white/5">
|
|
||||||
<div className="flex items-center gap-6">
|
|
||||||
<div className="w-14 h-14 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center shrink-0">
|
|
||||||
<XCircle className="w-7 h-7 text-red-400" strokeWidth={2} />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-3 mb-1">
|
|
||||||
<p className="font-mono text-2xl sm:text-3xl font-bold text-white tracking-tight">
|
|
||||||
{searchResult.domain}
|
|
||||||
</p>
|
|
||||||
<span className="px-3 py-1 bg-zinc-800 text-zinc-400 text-xs font-bold rounded-lg border border-white/10 uppercase tracking-wide">
|
|
||||||
Taken
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-zinc-400">
|
<div>
|
||||||
Someone got there first. For now.
|
<div className="uppercase tracking-widest text-[10px] mb-1">Expires</div>
|
||||||
</p>
|
<div className={clsx(
|
||||||
</div>
|
getDaysUntilExpiration(searchResult.expiration_date)! <= 90 ? "text-amber-400" : "text-white"
|
||||||
</div>
|
)}>
|
||||||
</div>
|
{formatDate(searchResult.expiration_date) || 'Unknown'}
|
||||||
|
|
||||||
{/* Domain Info */}
|
|
||||||
{(searchResult.registrar || searchResult.expiration_date || searchResult.name_servers) && (
|
|
||||||
<div className="p-6 sm:p-8 border-b border-white/5 bg-zinc-900/30">
|
|
||||||
<div className="grid sm:grid-cols-2 gap-8">
|
|
||||||
{searchResult.registrar && (
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="w-10 h-10 bg-zinc-800 rounded-xl flex items-center justify-center shrink-0 border border-white/5">
|
|
||||||
<Building2 className="w-5 h-5 text-zinc-500" />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="text-[10px] text-zinc-500 uppercase tracking-wider mb-1 font-bold">Registrar</p>
|
|
||||||
<p className="text-base text-white truncate font-medium">{searchResult.registrar}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{searchResult.expiration_date && (
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className={clsx(
|
|
||||||
"w-10 h-10 rounded-xl flex items-center justify-center shrink-0 border border-white/5",
|
|
||||||
getDaysUntilExpiration(searchResult.expiration_date) !== null &&
|
|
||||||
getDaysUntilExpiration(searchResult.expiration_date)! <= 90
|
|
||||||
? "bg-amber-500/10"
|
|
||||||
: "bg-zinc-800"
|
|
||||||
)}>
|
|
||||||
<Calendar className={clsx(
|
|
||||||
"w-5 h-5",
|
|
||||||
getDaysUntilExpiration(searchResult.expiration_date) !== null &&
|
|
||||||
getDaysUntilExpiration(searchResult.expiration_date)! <= 90
|
|
||||||
? "text-amber-400"
|
|
||||||
: "text-zinc-500"
|
|
||||||
)} />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="text-[10px] text-zinc-500 uppercase tracking-wider mb-1 font-bold">Expires</p>
|
|
||||||
<p className="text-base text-white font-medium">
|
|
||||||
{formatDate(searchResult.expiration_date)}
|
|
||||||
{getDaysUntilExpiration(searchResult.expiration_date) !== null && (
|
|
||||||
<span className={clsx(
|
|
||||||
"ml-2 text-xs font-bold",
|
|
||||||
getDaysUntilExpiration(searchResult.expiration_date)! <= 30
|
|
||||||
? "text-red-400"
|
|
||||||
: getDaysUntilExpiration(searchResult.expiration_date)! <= 90
|
|
||||||
? "text-amber-400"
|
|
||||||
: "text-zinc-500"
|
|
||||||
)}>
|
|
||||||
({getDaysUntilExpiration(searchResult.expiration_date)} days)
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{searchResult.name_servers && searchResult.name_servers.length > 0 && (
|
|
||||||
<div className="flex items-start gap-4 sm:col-span-2">
|
|
||||||
<div className="w-10 h-10 bg-zinc-800 rounded-xl flex items-center justify-center shrink-0 border border-white/5">
|
|
||||||
<Server className="w-5 h-5 text-zinc-500" />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0">
|
|
||||||
<p className="text-[10px] text-zinc-500 uppercase tracking-wider mb-1 font-bold">Name Servers</p>
|
|
||||||
<p className="text-base font-mono text-zinc-400 truncate">
|
|
||||||
{searchResult.name_servers.slice(0, 2).join(' · ')}
|
|
||||||
{searchResult.name_servers.length > 2 && (
|
|
||||||
<span className="text-zinc-600"> +{searchResult.name_servers.length - 2}</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Auction Notice */}
|
|
||||||
{searchResult.inAuction && searchResult.auctionData && (
|
|
||||||
<div className="px-6 sm:px-8 py-4 bg-amber-500/5 border-b border-white/5">
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 bg-amber-500/10 rounded-xl flex items-center justify-center shrink-0 border border-amber-500/20">
|
|
||||||
<Gavel className="w-5 h-5 text-amber-400" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-bold text-white flex items-center gap-2">
|
|
||||||
In Auction
|
|
||||||
<span className="px-2 py-0.5 rounded text-[10px] bg-amber-500/20 text-amber-400 uppercase tracking-wider font-bold">Live</span>
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-zinc-400 font-mono mt-0.5">
|
|
||||||
Current Bid: <span className="text-white font-bold">${searchResult.auctionData.current_bid}</span> • {searchResult.auctionData.time_remaining} left
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a
|
</div>
|
||||||
href={searchResult.auctionData.affiliate_url}
|
<button
|
||||||
target="_blank"
|
onClick={handleAddToWatchlist}
|
||||||
rel="noopener noreferrer"
|
disabled={addingToWatchlist}
|
||||||
className="px-6 py-2.5 bg-amber-500 hover:bg-amber-400 text-black text-sm font-bold rounded-xl transition-all shadow-lg shadow-amber-500/20"
|
className="w-full py-3 bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors uppercase text-xs font-bold tracking-widest"
|
||||||
>
|
>
|
||||||
Place Bid
|
Monitor for Expiry
|
||||||
</a>
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Secondary Intel */}
|
||||||
|
<div className="border-l border-white/[0.08] pl-8 space-y-4">
|
||||||
|
<div className="font-mono text-[10px] uppercase tracking-widest text-white/40 mb-4">Intel Report</div>
|
||||||
|
|
||||||
|
{searchResult.inAuction && searchResult.auctionData && (
|
||||||
|
<div className="p-4 bg-amber-500/5 border border-amber-500/20 mb-4">
|
||||||
|
<div className="flex items-center gap-2 text-amber-400 mb-2">
|
||||||
|
<Gavel className="w-4 h-4" />
|
||||||
|
<span className="text-xs font-bold uppercase tracking-wider">Live Auction Detected</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-end">
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-white/60">Current Bid</div>
|
||||||
|
<div className="text-xl font-mono text-white">${searchResult.auctionData.current_bid}</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={searchResult.auctionData.affiliate_url}
|
||||||
|
target="_blank"
|
||||||
|
className="text-[10px] uppercase underline text-amber-400 hover:text-white"
|
||||||
|
>
|
||||||
|
View Auction
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Watchlist CTA */}
|
<div className="space-y-2 text-xs font-mono text-white/40">
|
||||||
<div className="p-6 sm:p-8 bg-white/[0.02]">
|
<div className="flex justify-between border-b border-white/5 pb-2">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
<span>TLD Valuation</span>
|
||||||
<div className="flex items-center gap-2 text-sm text-zinc-400">
|
<span className="text-white">Calculating...</span>
|
||||||
<Clock className="w-4 h-4 text-zinc-500 shrink-0" />
|
</div>
|
||||||
<span>We'll alert you the moment it drops.</span>
|
<div className="flex justify-between border-b border-white/5 pb-2">
|
||||||
</div>
|
<span>Est. Traffic</span>
|
||||||
<button
|
<span className="text-white">Low Volume</span>
|
||||||
onClick={handleAddToWatchlist}
|
</div>
|
||||||
disabled={addingToWatchlist}
|
<div className="flex justify-between pb-2">
|
||||||
className="flex items-center justify-center gap-2 px-6 py-3 bg-zinc-800 text-white text-sm font-bold rounded-xl border border-white/10 hover:bg-zinc-700 transition-all"
|
<span>Spam Score</span>
|
||||||
>
|
<span className="text-accent">Clean (0/100)</span>
|
||||||
{addingToWatchlist ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
|
|
||||||
<span>Track This</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Helper Text */}
|
|
||||||
{!searchQuery && !searchFocused && (
|
|
||||||
<div className="mt-4 text-center">
|
|
||||||
<p className="text-sm text-zinc-500">
|
|
||||||
Search across <span className="text-zinc-400 font-medium">Global Registrars</span>, <span className="text-zinc-400 font-medium">Auctions</span>, and <span className="text-zinc-400 font-medium">Marketplaces</span> simultaneously.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 4. SPLIT VIEW: PULSE & ALERTS */}
|
{/* BOTTOM SECTION: INTEL FEED */}
|
||||||
<div className="grid lg:grid-cols-2 gap-6">
|
<div className="grid lg:grid-cols-2 gap-px bg-white/[0.08] border border-white/[0.08]">
|
||||||
|
|
||||||
{/* MARKET PULSE */}
|
{/* Market Feed */}
|
||||||
<div className="bg-zinc-900/40 border border-white/5 rounded-xl overflow-hidden backdrop-blur-sm h-full flex flex-col">
|
<div className="bg-[#020202] p-8">
|
||||||
<div className="p-5 border-b border-white/5 flex items-center justify-between bg-white/[0.02]">
|
<div className="flex items-center justify-between mb-8">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
|
<div className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
||||||
<Activity className="w-4 h-4 text-emerald-400" />
|
<h3 className="font-mono text-xs uppercase tracking-widest text-white">Live Operations</h3>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-bold text-white uppercase tracking-wider">Market Pulse</h3>
|
|
||||||
<p className="text-[10px] text-zinc-500">Live auctions ending soon</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Link href="/terminal/market" className="text-xs font-medium text-emerald-400 hover:text-emerald-300 transition-colors flex items-center gap-1 uppercase tracking-wide">
|
<Link href="/terminal/market" className="text-[10px] font-mono uppercase text-white/40 hover:text-white transition-colors">
|
||||||
View All <ArrowRight className="w-3 h-3" />
|
View All {'>'}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="divide-y divide-white/5 flex-1">
|
<div className="space-y-px bg-white/[0.05]">
|
||||||
{loadingData ? (
|
{loadingData ? (
|
||||||
<div className="p-8 text-center text-zinc-500 text-sm flex flex-col items-center gap-3">
|
<div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
|
||||||
<Loader2 className="w-6 h-6 animate-spin" />
|
INITIALIZING FEED...
|
||||||
Loading market data...
|
</div>
|
||||||
</div>
|
|
||||||
) : hotAuctions.length > 0 ? (
|
) : hotAuctions.length > 0 ? (
|
||||||
hotAuctions.map((auction, i) => (
|
hotAuctions.map((auction, i) => (
|
||||||
<a
|
<a
|
||||||
key={i}
|
key={i}
|
||||||
href={auction.affiliate_url || '#'}
|
href={auction.affiliate_url || '#'}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
className="flex items-center justify-between p-4 bg-[#020202] hover:bg-white/[0.02] transition-colors group"
|
||||||
className="flex items-center justify-between p-4 hover:bg-white/[0.04] transition-colors group"
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<div className="w-10 h-10 rounded-lg bg-zinc-800 flex items-center justify-center text-[10px] font-bold text-zinc-500 border border-zinc-700 group-hover:border-zinc-600 transition-colors">
|
<span className="font-mono text-[10px] text-white/30 w-8">{auction.platform.substring(0, 2).toUpperCase()}</span>
|
||||||
{auction.platform.substring(0, 2).toUpperCase()}
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-bold text-white font-mono group-hover:text-emerald-400 transition-colors">
|
<div className="text-sm text-white group-hover:text-accent transition-colors font-medium">
|
||||||
{auction.domain}
|
{auction.domain}
|
||||||
</p>
|
</div>
|
||||||
<p className="text-[11px] text-zinc-500 flex items-center gap-2 mt-0.5">
|
<div className="text-[10px] text-white/30 font-mono mt-1">
|
||||||
<span className="text-zinc-400">{auction.platform}</span> • <span className="text-amber-400 font-medium">{auction.time_remaining} left</span>
|
{auction.time_remaining} REMAINING
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<p className="text-sm font-mono font-bold text-white">${auction.current_bid}</p>
|
<div className="font-mono text-sm text-accent">${auction.current_bid}</div>
|
||||||
<p className="text-[10px] text-zinc-600 uppercase tracking-wider">Current Bid</p>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<div className="p-12 text-center text-zinc-500">
|
<div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
|
||||||
<Gavel className="w-10 h-10 mx-auto mb-3 opacity-20" />
|
NO ACTIVE SIGNALS
|
||||||
<p className="text-sm">No live auctions right now</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* WATCHLIST ACTIVITY */}
|
{/* Alerts Feed */}
|
||||||
<div className="bg-zinc-900/40 border border-white/5 rounded-xl overflow-hidden backdrop-blur-sm h-full flex flex-col">
|
<div className="bg-[#020202] p-8">
|
||||||
<div className="p-5 border-b border-white/5 flex items-center justify-between bg-white/[0.02]">
|
<div className="flex items-center justify-between mb-8">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<div className="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center border border-amber-500/20">
|
<div className="w-1.5 h-1.5 bg-amber-500" />
|
||||||
<Bell className="w-4 h-4 text-amber-400" />
|
<h3 className="font-mono text-xs uppercase tracking-widest text-white">Watchlist Intel</h3>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-bold text-white uppercase tracking-wider">Recent Alerts</h3>
|
|
||||||
<p className="text-[10px] text-zinc-500">Status changes on watchlist</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Link href="/terminal/watchlist" className="text-xs font-medium text-amber-400 hover:text-amber-300 transition-colors flex items-center gap-1 uppercase tracking-wide">
|
<Link href="/terminal/watchlist" className="text-[10px] font-mono uppercase text-white/40 hover:text-white transition-colors">
|
||||||
Manage <ArrowRight className="w-3 h-3" />
|
Manage {'>'}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="divide-y divide-white/5 flex-1">
|
<div className="space-y-px bg-white/[0.05]">
|
||||||
{recentAlerts.length > 0 ? (
|
{recentAlerts.length > 0 ? (
|
||||||
recentAlerts.slice(0, 5).map((alert, idx) => (
|
recentAlerts.slice(0, 5).map((alert, idx) => (
|
||||||
<div key={`${alert.domain.id}-${alert.type}`} className="flex items-center justify-between p-4 hover:bg-white/[0.04] transition-colors group">
|
<div key={`${alert.domain.id}-${idx}`} className="flex items-center justify-between p-4 bg-[#020202] hover:bg-white/[0.02] transition-colors">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
{alert.type === 'available' ? (
|
{alert.type === 'available' ? (
|
||||||
<div className="relative w-10 h-10 flex items-center justify-center">
|
<CheckCircle2 className="w-4 h-4 text-accent" />
|
||||||
<div className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
|
) : alert.type === 'expiring' ? (
|
||||||
<div className="absolute inset-0 rounded-full bg-emerald-500 animate-ping opacity-20" />
|
<Clock className="w-4 h-4 text-amber-500" />
|
||||||
</div>
|
) : (
|
||||||
) : alert.type === 'expiring' ? (
|
<Activity className="w-4 h-4 text-white/20" />
|
||||||
<div className="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center border border-amber-500/20 text-amber-400">
|
)}
|
||||||
<Clock className="w-4 h-4" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="w-10 h-10 rounded-lg bg-zinc-800 flex items-center justify-center border border-zinc-700 text-zinc-500">
|
|
||||||
<Activity className="w-4 h-4" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-bold text-white font-mono group-hover:text-emerald-400 transition-colors">{alert.domain.name}</p>
|
<div className="text-sm text-white font-medium">{alert.domain.name}</div>
|
||||||
<p className={clsx(
|
<div className="text-[10px] text-white/30 font-mono mt-1 uppercase">
|
||||||
"text-[11px] font-medium mt-0.5 flex items-center gap-1.5",
|
{alert.type === 'available' && "Status: Available"}
|
||||||
alert.type === 'available' && "text-emerald-400",
|
{alert.type === 'expiring' && `Expiring: ${new Date(alert.domain.expiration_date!).toLocaleDateString()}`}
|
||||||
alert.type === 'expiring' && "text-amber-400",
|
{alert.type === 'checked' && "Regular Scan Completed"}
|
||||||
alert.type === 'checked' && "text-zinc-500"
|
|
||||||
)}>
|
|
||||||
{alert.type === 'available' && (
|
|
||||||
<>
|
|
||||||
<CheckCircle2 className="w-3 h-3" /> Available Now
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{alert.type === 'expiring' && `Expires ${new Date(alert.domain.expiration_date!).toLocaleDateString()}`}
|
|
||||||
{alert.type === 'checked' && `Checked ${alert.domain.last_checked ? new Date(alert.domain.last_checked).toLocaleTimeString() : ''}`}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{alert.type === 'available' ? (
|
{alert.type === 'available' && (
|
||||||
<a
|
<span className="text-[10px] font-mono text-accent uppercase tracking-wider border border-accent/20 px-2 py-1">
|
||||||
href={`https://www.namecheap.com/domains/registration/results/?domain=${alert.domain.name}`}
|
Action Req
|
||||||
target="_blank"
|
</span>
|
||||||
rel="noopener noreferrer"
|
)}
|
||||||
className="px-4 py-1.5 bg-emerald-500/10 text-emerald-400 text-[10px] font-bold uppercase tracking-wider rounded-lg border border-emerald-500/20 hover:bg-emerald-500/20 transition-all"
|
|
||||||
>
|
|
||||||
Register
|
|
||||||
</a>
|
|
||||||
) : alert.type === 'expiring' ? (
|
|
||||||
<span className="px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-amber-400 bg-amber-500/10 rounded-lg border border-amber-500/20">
|
|
||||||
Expiring
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="text-[10px] text-zinc-600 font-medium px-2 py-1 bg-zinc-900 rounded border border-zinc-800">
|
|
||||||
{alert.domain.status}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
) : totalDomains > 0 ? (
|
|
||||||
<div className="p-12 text-center text-zinc-500">
|
|
||||||
<ShieldAlert className="w-10 h-10 mx-auto mb-3 opacity-20" />
|
|
||||||
<p className="text-sm">All watched domains are stable</p>
|
|
||||||
<p className="text-xs text-zinc-600 mt-1">No alerts at this time</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="p-12 text-center text-zinc-500">
|
<div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
|
||||||
<Eye className="w-10 h-10 mx-auto mb-3 opacity-20" />
|
WATCHLIST EMPTY
|
||||||
<p className="text-sm">Your watchlist is empty</p>
|
|
||||||
<p className="text-xs text-zinc-600 mt-1">Use search to add domains</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TerminalLayout>
|
</CommandCenterLayout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user