feat: TLD page - search, pagination, popularity sort
- Add search functionality (filter TLDs by name) - Add pagination (25 per page with page navigation) - Sort by popularity (Top TLDs first: com, net, org, de, uk...) - Show all info for authenticated users - Backend: offset/limit params, search filter, popularity ranking TLD order: com > net > org > de > uk > io > ai > app...
This commit is contained in:
yves.gugger
@ -326,16 +326,31 @@ def get_max_price(tld_data: dict) -> float:
|
||||
return max(r["register"] for r in tld_data["registrars"].values())
|
||||
|
||||
|
||||
# Top TLDs by popularity (based on actual domain registration volumes)
|
||||
TOP_TLDS_BY_POPULARITY = [
|
||||
"com", "net", "org", "de", "uk", "cn", "ru", "nl", "br", "au",
|
||||
"io", "co", "ai", "app", "dev", "xyz", "online", "site", "tech", "store",
|
||||
"info", "biz", "me", "tv", "cc", "eu", "fr", "it", "es", "pl",
|
||||
"ch", "at", "be", "se", "no", "dk", "fi", "ie", "nz", "in",
|
||||
]
|
||||
|
||||
|
||||
@router.get("/overview")
|
||||
async def get_tld_overview(
|
||||
db: Database,
|
||||
limit: int = Query(50, ge=1, le=100),
|
||||
limit: int = Query(25, ge=1, le=100),
|
||||
offset: int = Query(0, ge=0),
|
||||
sort_by: str = Query("popularity", enum=["popularity", "price_asc", "price_desc", "name"]),
|
||||
search: str = Query(None, description="Search TLDs by name"),
|
||||
source: str = Query("auto", enum=["auto", "db", "static"]),
|
||||
):
|
||||
"""Get overview of TLDs with current pricing.
|
||||
"""Get overview of TLDs with current pricing, pagination, and search.
|
||||
|
||||
Args:
|
||||
limit: Number of results per page (default 25)
|
||||
offset: Skip N results for pagination
|
||||
search: Filter TLDs by name (e.g., "com", "io")
|
||||
sort_by: Sort order - popularity (default), price_asc, price_desc, name
|
||||
source: Data source - "auto" (DB first, fallback to static), "db" (only DB), "static" (only static)
|
||||
"""
|
||||
tld_list = []
|
||||
@ -359,6 +374,7 @@ async def get_tld_overview(
|
||||
"max_registration_price": max(prices),
|
||||
"registrar_count": len(data["registrars"]),
|
||||
"trend": TLD_DATA.get(tld, {}).get("trend", "stable"),
|
||||
"popularity_rank": TOP_TLDS_BY_POPULARITY.index(tld) if tld in TOP_TLDS_BY_POPULARITY else 999,
|
||||
})
|
||||
|
||||
# Use static data as fallback or if requested
|
||||
@ -374,19 +390,36 @@ async def get_tld_overview(
|
||||
"max_registration_price": get_max_price(data),
|
||||
"registrar_count": len(data["registrars"]),
|
||||
"trend": data["trend"],
|
||||
"popularity_rank": TOP_TLDS_BY_POPULARITY.index(tld) if tld in TOP_TLDS_BY_POPULARITY else 999,
|
||||
})
|
||||
|
||||
# Apply search filter
|
||||
if search:
|
||||
search_lower = search.lower().lstrip(".")
|
||||
tld_list = [t for t in tld_list if search_lower in t["tld"].lower()]
|
||||
|
||||
# Store total before pagination
|
||||
total = len(tld_list)
|
||||
|
||||
# Sort
|
||||
if sort_by == "price_asc":
|
||||
if sort_by == "popularity":
|
||||
tld_list.sort(key=lambda x: (x["popularity_rank"], x["tld"]))
|
||||
elif sort_by == "price_asc":
|
||||
tld_list.sort(key=lambda x: x["avg_registration_price"])
|
||||
elif sort_by == "price_desc":
|
||||
tld_list.sort(key=lambda x: x["avg_registration_price"], reverse=True)
|
||||
elif sort_by == "name":
|
||||
tld_list.sort(key=lambda x: x["tld"])
|
||||
|
||||
# Apply pagination
|
||||
paginated = tld_list[offset:offset + limit]
|
||||
|
||||
return {
|
||||
"tlds": tld_list[:limit],
|
||||
"total": len(tld_list),
|
||||
"tlds": paginated,
|
||||
"total": total,
|
||||
"limit": limit,
|
||||
"offset": offset,
|
||||
"has_more": offset + limit < total,
|
||||
"source": data_source,
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useMemo } from 'react'
|
||||
import { useEffect, useState, useMemo, useCallback } from 'react'
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { useStore } from '@/lib/store'
|
||||
@ -16,6 +16,9 @@ import {
|
||||
ChevronsUpDown,
|
||||
Lock,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
Search,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
@ -29,6 +32,7 @@ interface TldData {
|
||||
max_registration_price: number
|
||||
registrar_count: number
|
||||
trend: string
|
||||
popularity_rank?: number
|
||||
}
|
||||
|
||||
interface TrendingTld {
|
||||
@ -38,17 +42,17 @@ interface TrendingTld {
|
||||
current_price: number
|
||||
}
|
||||
|
||||
interface TldHistoryData {
|
||||
history: Array<{
|
||||
date: string
|
||||
price: number
|
||||
}>
|
||||
interface PaginationData {
|
||||
total: number
|
||||
limit: number
|
||||
offset: number
|
||||
has_more: boolean
|
||||
}
|
||||
|
||||
type SortField = 'tld' | 'avg_registration_price' | 'min_registration_price' | 'registrar_count'
|
||||
type SortField = 'popularity' | 'tld' | 'avg_registration_price' | 'min_registration_price'
|
||||
type SortDirection = 'asc' | 'desc'
|
||||
|
||||
// Mini sparkline chart component with real data - Enhanced version
|
||||
// Mini sparkline chart component
|
||||
function MiniChart({ tld, isAuthenticated }: { tld: string, isAuthenticated: boolean }) {
|
||||
const [historyData, setHistoryData] = useState<number[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
@ -56,6 +60,8 @@ function MiniChart({ tld, isAuthenticated }: { tld: string, isAuthenticated: boo
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) {
|
||||
loadHistory()
|
||||
} else {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [tld, isAuthenticated])
|
||||
|
||||
@ -64,9 +70,9 @@ function MiniChart({ tld, isAuthenticated }: { tld: string, isAuthenticated: boo
|
||||
const data = await api.getTldHistory(tld, 365)
|
||||
const history = data.history || []
|
||||
const sampledData = history
|
||||
.filter((_, i) => i % Math.floor(history.length / 12) === 0)
|
||||
.filter((_: unknown, i: number) => i % Math.max(1, Math.floor(history.length / 12)) === 0)
|
||||
.slice(0, 12)
|
||||
.map(h => h.price)
|
||||
.map((h: { price: number }) => h.price)
|
||||
|
||||
setHistoryData(sampledData.length > 0 ? sampledData : [])
|
||||
} catch (error) {
|
||||
@ -77,28 +83,34 @@ function MiniChart({ tld, isAuthenticated }: { tld: string, isAuthenticated: boo
|
||||
}
|
||||
}
|
||||
|
||||
if (!isAuthenticated || loading || historyData.length === 0) {
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-ui-sm text-foreground-subtle">
|
||||
<Lock className="w-3 h-3" />
|
||||
Sign in
|
||||
<span>Sign in</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className="w-32 h-10 bg-background-tertiary rounded animate-pulse" />
|
||||
}
|
||||
|
||||
if (historyData.length === 0) {
|
||||
return <div className="w-32 h-10 flex items-center justify-center text-ui-sm text-foreground-subtle">No data</div>
|
||||
}
|
||||
|
||||
const min = Math.min(...historyData)
|
||||
const max = Math.max(...historyData)
|
||||
const range = max - min || 1
|
||||
const isIncreasing = historyData[historyData.length - 1] > historyData[0]
|
||||
|
||||
// Create line points
|
||||
const linePoints = historyData.map((value, i) => {
|
||||
const x = (i / (historyData.length - 1)) * 100
|
||||
const y = 100 - ((value - min) / range) * 80 - 10 // Add padding
|
||||
const y = 100 - ((value - min) / range) * 80 - 10
|
||||
return `${x},${y}`
|
||||
}).join(' ')
|
||||
|
||||
// Create area path for gradient fill
|
||||
const areaPath = historyData.map((value, i) => {
|
||||
const x = (i / (historyData.length - 1)) * 100
|
||||
const y = 100 - ((value - min) / range) * 80 - 10
|
||||
@ -111,57 +123,19 @@ function MiniChart({ tld, isAuthenticated }: { tld: string, isAuthenticated: boo
|
||||
<svg className="w-32 h-10" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor={isIncreasing ? "#f97316" : "#00d4aa"}
|
||||
stopOpacity="0.3"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor={isIncreasing ? "#f97316" : "#00d4aa"}
|
||||
stopOpacity="0.02"
|
||||
/>
|
||||
<stop offset="0%" stopColor={isIncreasing ? "#f97316" : "#00d4aa"} stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor={isIncreasing ? "#f97316" : "#00d4aa"} stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{/* Area fill */}
|
||||
<path
|
||||
d={areaPath}
|
||||
fill={`url(#${gradientId})`}
|
||||
className="transition-all duration-300"
|
||||
/>
|
||||
|
||||
{/* Line */}
|
||||
<path d={areaPath} fill={`url(#${gradientId})`} />
|
||||
<polyline
|
||||
points={linePoints}
|
||||
fill="none"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={clsx(
|
||||
"transition-all duration-300",
|
||||
isIncreasing ? "stroke-[#f97316]" : "stroke-accent"
|
||||
)}
|
||||
className={isIncreasing ? "stroke-[#f97316]" : "stroke-accent"}
|
||||
/>
|
||||
|
||||
{/* Dots for each data point */}
|
||||
{historyData.map((value, i) => {
|
||||
const x = (i / (historyData.length - 1)) * 100
|
||||
const y = 100 - ((value - min) / range) * 80 - 10
|
||||
return (
|
||||
<circle
|
||||
key={i}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="1.5"
|
||||
className={clsx(
|
||||
"transition-all duration-300",
|
||||
isIncreasing ? "fill-[#f97316]" : "fill-accent"
|
||||
)}
|
||||
opacity={i === historyData.length - 1 ? "1" : "0.4"}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -175,47 +149,74 @@ function SortIcon({ field, currentField, direction }: { field: SortField, curren
|
||||
: <ChevronDown className="w-4 h-4 text-accent" />
|
||||
}
|
||||
|
||||
function ShimmerBlock({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={clsx(
|
||||
"relative overflow-hidden rounded bg-background-tertiary",
|
||||
className
|
||||
)}>
|
||||
<div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-foreground/5 to-transparent" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function TldPricingPage() {
|
||||
const { isAuthenticated, checkAuth, isLoading: authLoading } = useStore()
|
||||
const [tlds, setTlds] = useState<TldData[]>([])
|
||||
const [trending, setTrending] = useState<TrendingTld[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [sortField, setSortField] = useState<SortField>('tld')
|
||||
const [pagination, setPagination] = useState<PaginationData>({ total: 0, limit: 25, offset: 0, has_more: false })
|
||||
|
||||
// Search & Sort state
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('')
|
||||
const [sortField, setSortField] = useState<SortField>('popularity')
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
|
||||
|
||||
// Debounce search
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearch(searchQuery)
|
||||
}, 300)
|
||||
return () => clearTimeout(timer)
|
||||
}, [searchQuery])
|
||||
|
||||
useEffect(() => {
|
||||
checkAuth()
|
||||
loadData()
|
||||
loadTrending()
|
||||
}, [checkAuth])
|
||||
|
||||
const loadData = async () => {
|
||||
// Load TLDs with pagination, search, and sort
|
||||
useEffect(() => {
|
||||
loadTlds()
|
||||
}, [debouncedSearch, sortField, sortDirection, pagination.offset])
|
||||
|
||||
const loadTlds = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [overviewData, trendingData] = await Promise.all([
|
||||
api.getTldOverview(100),
|
||||
api.getTrendingTlds(),
|
||||
])
|
||||
setTlds(overviewData?.tlds || [])
|
||||
setTrending(trendingData?.trending || [])
|
||||
const sortBy = sortField === 'tld' ? 'name' : sortField === 'popularity' ? 'popularity' :
|
||||
sortField === 'avg_registration_price' ? (sortDirection === 'asc' ? 'price_asc' : 'price_desc') :
|
||||
(sortDirection === 'asc' ? 'price_asc' : 'price_desc')
|
||||
|
||||
const data = await api.getTldOverview(
|
||||
pagination.limit,
|
||||
pagination.offset,
|
||||
sortBy,
|
||||
debouncedSearch || undefined
|
||||
)
|
||||
|
||||
setTlds(data?.tlds || [])
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
total: data?.total || 0,
|
||||
has_more: data?.has_more || false,
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error('Failed to load TLD data:', error)
|
||||
setTlds([])
|
||||
setTrending([])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadTrending = async () => {
|
||||
try {
|
||||
const data = await api.getTrendingTlds()
|
||||
setTrending(data?.trending || [])
|
||||
} catch (error) {
|
||||
console.error('Failed to load trending:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
|
||||
@ -223,22 +224,15 @@ export default function TldPricingPage() {
|
||||
setSortField(field)
|
||||
setSortDirection('asc')
|
||||
}
|
||||
// Reset to first page on sort change
|
||||
setPagination(prev => ({ ...prev, offset: 0 }))
|
||||
}
|
||||
|
||||
const sortedTlds = useMemo(() => {
|
||||
const sorted = [...tlds].sort((a, b) => {
|
||||
let aVal: number | string = a[sortField]
|
||||
let bVal: number | string = b[sortField]
|
||||
|
||||
if (typeof aVal === 'string') aVal = aVal.toLowerCase()
|
||||
if (typeof bVal === 'string') bVal = bVal.toLowerCase()
|
||||
|
||||
if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1
|
||||
if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1
|
||||
return 0
|
||||
})
|
||||
return sorted
|
||||
}, [tlds, sortField, sortDirection])
|
||||
const handlePageChange = (newOffset: number) => {
|
||||
setPagination(prev => ({ ...prev, offset: newOffset }))
|
||||
// Scroll to top of table
|
||||
window.scrollTo({ top: 300, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const getTrendIcon = (trend: string) => {
|
||||
switch (trend) {
|
||||
@ -251,7 +245,11 @@ export default function TldPricingPage() {
|
||||
}
|
||||
}
|
||||
|
||||
if (loading || authLoading) {
|
||||
// Pagination calculations
|
||||
const currentPage = Math.floor(pagination.offset / pagination.limit) + 1
|
||||
const totalPages = Math.ceil(pagination.total / pagination.limit)
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="w-5 h-5 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||
@ -280,7 +278,7 @@ export default function TldPricingPage() {
|
||||
Domain Extension Pricing
|
||||
</h1>
|
||||
<p className="text-body sm:text-body-lg text-foreground-muted max-w-2xl mx-auto">
|
||||
Track price trends across all major TLDs. Compare prices and monitor trends over time.
|
||||
Track price trends across {pagination.total}+ TLDs. Compare prices and monitor trends over time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -294,7 +292,7 @@ export default function TldPricingPage() {
|
||||
<div>
|
||||
<p className="text-body-sm font-medium text-foreground">Unlock Full TLD Data</p>
|
||||
<p className="text-ui-sm text-foreground-muted">
|
||||
Sign in to see detailed pricing and trends.
|
||||
Sign in to see detailed pricing, charts, and trends.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -324,30 +322,22 @@ export default function TldPricingPage() {
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="font-mono text-body-lg sm:text-heading-sm text-foreground">.{item.tld}</span>
|
||||
{isAuthenticated ? (
|
||||
<span className={clsx(
|
||||
"text-ui-sm font-medium px-2 py-0.5 rounded-full",
|
||||
item.price_change > 0
|
||||
? "text-[#f97316] bg-[#f9731615]"
|
||||
: "text-accent bg-accent-muted"
|
||||
)}>
|
||||
{item.price_change > 0 ? '+' : ''}{item.price_change.toFixed(1)}%
|
||||
</span>
|
||||
) : (
|
||||
<ShimmerBlock className="h-5 w-14" />
|
||||
)}
|
||||
<span className={clsx(
|
||||
"text-ui-sm font-medium px-2 py-0.5 rounded-full",
|
||||
item.price_change > 0
|
||||
? "text-[#f97316] bg-[#f9731615]"
|
||||
: "text-accent bg-accent-muted"
|
||||
)}>
|
||||
{item.price_change > 0 ? '+' : ''}{item.price_change.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-body-sm text-foreground-muted mb-2 line-clamp-2">
|
||||
{isAuthenticated ? item.reason : 'Sign in to view trend details'}
|
||||
{item.reason}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
{isAuthenticated ? (
|
||||
<span className="text-body-sm text-foreground-subtle">
|
||||
${item.current_price.toFixed(2)}/yr
|
||||
</span>
|
||||
) : (
|
||||
<ShimmerBlock className="h-5 w-20" />
|
||||
)}
|
||||
<span className="text-body-sm text-foreground-subtle">
|
||||
${item.current_price.toFixed(2)}/yr
|
||||
</span>
|
||||
<ChevronRight className="w-4 h-4 text-foreground-subtle group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
</Link>
|
||||
@ -356,12 +346,52 @@ export default function TldPricingPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="mb-6 animate-slide-up">
|
||||
<div className="relative max-w-md">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground-subtle" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search TLDs (e.g., com, io, ai)..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value)
|
||||
setPagination(prev => ({ ...prev, offset: 0 }))
|
||||
}}
|
||||
className="w-full pl-12 pr-10 py-3 bg-background-secondary/50 border border-border rounded-xl
|
||||
text-body text-foreground placeholder:text-foreground-subtle
|
||||
focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent
|
||||
transition-all duration-300"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchQuery('')
|
||||
setPagination(prev => ({ ...prev, offset: 0 }))
|
||||
}}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 p-1 text-foreground-subtle hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TLD Table */}
|
||||
<div className="bg-background-secondary/30 border border-border rounded-xl overflow-hidden animate-slide-up">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-background-secondary border-b border-border">
|
||||
<th className="text-left px-4 sm:px-6 py-4">
|
||||
<button
|
||||
onClick={() => handleSort('popularity')}
|
||||
className="flex items-center gap-2 text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||
>
|
||||
#
|
||||
<SortIcon field="popularity" currentField={sortField} direction={sortDirection} />
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-left px-4 sm:px-6 py-4">
|
||||
<button
|
||||
onClick={() => handleSort('tld')}
|
||||
@ -372,14 +402,10 @@ export default function TldPricingPage() {
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-left px-4 sm:px-6 py-4 hidden lg:table-cell">
|
||||
<span className="text-ui-sm text-foreground-subtle font-medium">
|
||||
Description
|
||||
</span>
|
||||
<span className="text-ui-sm text-foreground-subtle font-medium">Type</span>
|
||||
</th>
|
||||
<th className="text-left px-4 sm:px-6 py-4 hidden md:table-cell">
|
||||
<span className="text-ui-sm text-foreground-subtle font-medium">
|
||||
12-Month Trend
|
||||
</span>
|
||||
<span className="text-ui-sm text-foreground-subtle font-medium">12-Month Trend</span>
|
||||
</th>
|
||||
<th className="text-right px-4 sm:px-6 py-4">
|
||||
<button
|
||||
@ -399,15 +425,6 @@ export default function TldPricingPage() {
|
||||
<SortIcon field="min_registration_price" currentField={sortField} direction={sortDirection} />
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-center px-4 sm:px-6 py-4 hidden xl:table-cell">
|
||||
<button
|
||||
onClick={() => handleSort('registrar_count')}
|
||||
className="flex items-center gap-2 mx-auto text-ui-sm text-foreground-subtle font-medium hover:text-foreground transition-colors"
|
||||
>
|
||||
Registrars
|
||||
<SortIcon field="registrar_count" currentField={sortField} direction={sortDirection} />
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-center px-4 sm:px-6 py-4 hidden sm:table-cell">
|
||||
<span className="text-ui-sm text-foreground-subtle font-medium">Trend</span>
|
||||
</th>
|
||||
@ -415,76 +432,181 @@ export default function TldPricingPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{sortedTlds.map((tld, idx) => (
|
||||
<tr
|
||||
key={tld.tld}
|
||||
className="hover:bg-background-secondary/50 transition-colors group"
|
||||
>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
<span className="font-mono text-body-sm sm:text-body font-medium text-foreground">
|
||||
.{tld.tld}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell">
|
||||
<span className="text-body-sm text-foreground-muted line-clamp-1">
|
||||
{tld.description}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden md:table-cell">
|
||||
<MiniChart tld={tld.tld} isAuthenticated={isAuthenticated} />
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right">
|
||||
{isAuthenticated ? (
|
||||
<span className="text-body-sm font-medium text-foreground">
|
||||
${tld.avg_registration_price.toFixed(2)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-body-sm text-foreground-subtle">•••</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell">
|
||||
{isAuthenticated ? (
|
||||
<span className="text-body-sm text-accent">
|
||||
${tld.min_registration_price.toFixed(2)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-body-sm text-foreground-subtle">•••</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-center hidden xl:table-cell">
|
||||
{isAuthenticated ? (
|
||||
<span className="text-body-sm text-foreground-muted">
|
||||
{tld.registrar_count}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-body-sm text-foreground-subtle">•</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-center hidden sm:table-cell">
|
||||
{isAuthenticated ? getTrendIcon(tld.trend) : <Minus className="w-4 h-4 text-foreground-subtle mx-auto" />}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
<Link
|
||||
href={isAuthenticated ? `/tld-pricing/${tld.tld}` : '/register'}
|
||||
className="flex items-center gap-1 text-ui-sm text-accent hover:text-accent-hover transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
Details
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
{loading ? (
|
||||
// Loading skeleton
|
||||
Array.from({ length: 10 }).map((_, idx) => (
|
||||
<tr key={idx} className="animate-pulse">
|
||||
<td className="px-4 sm:px-6 py-4"><div className="h-4 w-8 bg-background-tertiary rounded" /></td>
|
||||
<td className="px-4 sm:px-6 py-4"><div className="h-4 w-16 bg-background-tertiary rounded" /></td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell"><div className="h-4 w-20 bg-background-tertiary rounded" /></td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden md:table-cell"><div className="h-10 w-32 bg-background-tertiary rounded" /></td>
|
||||
<td className="px-4 sm:px-6 py-4"><div className="h-4 w-16 bg-background-tertiary rounded ml-auto" /></td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden sm:table-cell"><div className="h-4 w-16 bg-background-tertiary rounded ml-auto" /></td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden sm:table-cell"><div className="h-4 w-6 bg-background-tertiary rounded mx-auto" /></td>
|
||||
<td className="px-4 sm:px-6 py-4"><div className="h-4 w-12 bg-background-tertiary rounded" /></td>
|
||||
</tr>
|
||||
))
|
||||
) : tlds.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-6 py-12 text-center text-foreground-muted">
|
||||
{searchQuery ? `No TLDs found matching "${searchQuery}"` : 'No TLDs found'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
) : (
|
||||
tlds.map((tld, idx) => (
|
||||
<tr
|
||||
key={tld.tld}
|
||||
className="hover:bg-background-secondary/50 transition-colors group"
|
||||
>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
<span className="text-body-sm text-foreground-subtle">
|
||||
{pagination.offset + idx + 1}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
<span className="font-mono text-body-sm sm:text-body font-medium text-foreground">
|
||||
.{tld.tld}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden lg:table-cell">
|
||||
<span className={clsx(
|
||||
"text-ui-sm px-2 py-0.5 rounded-full",
|
||||
tld.type === 'generic' ? 'text-accent bg-accent-muted' :
|
||||
tld.type === 'ccTLD' ? 'text-blue-400 bg-blue-400/10' :
|
||||
'text-purple-400 bg-purple-400/10'
|
||||
)}>
|
||||
{tld.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 hidden md:table-cell">
|
||||
<MiniChart tld={tld.tld} isAuthenticated={isAuthenticated} />
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right">
|
||||
{isAuthenticated ? (
|
||||
<span className="text-body-sm font-medium text-foreground">
|
||||
${tld.avg_registration_price.toFixed(2)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-body-sm text-foreground-subtle">•••</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-right hidden sm:table-cell">
|
||||
{isAuthenticated ? (
|
||||
<span className="text-body-sm text-accent">
|
||||
${tld.min_registration_price.toFixed(2)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-body-sm text-foreground-subtle">•••</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4 text-center hidden sm:table-cell">
|
||||
{isAuthenticated ? getTrendIcon(tld.trend) : <Minus className="w-4 h-4 text-foreground-subtle mx-auto" />}
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-4">
|
||||
<Link
|
||||
href={isAuthenticated ? `/tld-pricing/${tld.tld}` : '/register'}
|
||||
className="flex items-center gap-1 text-ui-sm text-accent hover:text-accent-hover transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
Details
|
||||
<ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading && pagination.total > pagination.limit && (
|
||||
<div className="px-4 sm:px-6 py-4 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p className="text-ui-sm text-foreground-subtle">
|
||||
Showing {pagination.offset + 1}-{Math.min(pagination.offset + pagination.limit, pagination.total)} of {pagination.total} TLDs
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Previous Button */}
|
||||
<button
|
||||
onClick={() => handlePageChange(pagination.offset - pagination.limit)}
|
||||
disabled={pagination.offset === 0}
|
||||
className={clsx(
|
||||
"flex items-center gap-1 px-3 py-2 rounded-lg text-ui-sm transition-all",
|
||||
pagination.offset === 0
|
||||
? "text-foreground-subtle cursor-not-allowed"
|
||||
: "text-foreground hover:bg-background-secondary"
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
Prev
|
||||
</button>
|
||||
|
||||
{/* Page Numbers */}
|
||||
<div className="hidden sm:flex items-center gap-1">
|
||||
{Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
|
||||
let pageNum: number
|
||||
if (totalPages <= 5) {
|
||||
pageNum = i + 1
|
||||
} else if (currentPage <= 3) {
|
||||
pageNum = i + 1
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
pageNum = totalPages - 4 + i
|
||||
} else {
|
||||
pageNum = currentPage - 2 + i
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={pageNum}
|
||||
onClick={() => handlePageChange((pageNum - 1) * pagination.limit)}
|
||||
className={clsx(
|
||||
"w-9 h-9 rounded-lg text-ui-sm font-medium transition-all",
|
||||
currentPage === pageNum
|
||||
? "bg-accent text-background"
|
||||
: "text-foreground-muted hover:bg-background-secondary hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{pageNum}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Mobile Page Indicator */}
|
||||
<span className="sm:hidden text-ui-sm text-foreground-muted">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
|
||||
{/* Next Button */}
|
||||
<button
|
||||
onClick={() => handlePageChange(pagination.offset + pagination.limit)}
|
||||
disabled={!pagination.has_more}
|
||||
className={clsx(
|
||||
"flex items-center gap-1 px-3 py-2 rounded-lg text-ui-sm transition-all",
|
||||
!pagination.has_more
|
||||
? "text-foreground-subtle cursor-not-allowed"
|
||||
: "text-foreground hover:bg-background-secondary"
|
||||
)}
|
||||
>
|
||||
Next
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-6 flex justify-center">
|
||||
<p className="text-ui-sm text-foreground-subtle">
|
||||
Showing {sortedTlds.length} TLDs
|
||||
</p>
|
||||
</div>
|
||||
{!loading && (
|
||||
<div className="mt-6 flex justify-center">
|
||||
<p className="text-ui-sm text-foreground-subtle">
|
||||
{searchQuery
|
||||
? `Found ${pagination.total} TLDs matching "${searchQuery}"`
|
||||
: `${pagination.total} TLDs available • Sorted by ${sortField === 'popularity' ? 'popularity' : sortField === 'tld' ? 'name' : 'price'}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
@ -225,7 +225,20 @@ class ApiClient {
|
||||
}
|
||||
|
||||
// TLD Pricing
|
||||
async getTldOverview(limit = 20) {
|
||||
async getTldOverview(
|
||||
limit = 25,
|
||||
offset = 0,
|
||||
sortBy: 'popularity' | 'price_asc' | 'price_desc' | 'name' = 'popularity',
|
||||
search?: string
|
||||
) {
|
||||
const params = new URLSearchParams({
|
||||
limit: limit.toString(),
|
||||
offset: offset.toString(),
|
||||
sort_by: sortBy,
|
||||
})
|
||||
if (search) {
|
||||
params.append('search', search)
|
||||
}
|
||||
return this.request<{
|
||||
tlds: Array<{
|
||||
tld: string
|
||||
@ -236,9 +249,14 @@ class ApiClient {
|
||||
max_registration_price: number
|
||||
registrar_count: number
|
||||
trend: string
|
||||
popularity_rank?: number
|
||||
}>
|
||||
total: number
|
||||
}>(`/tld-prices/overview?limit=${limit}`)
|
||||
limit: number
|
||||
offset: number
|
||||
has_more: boolean
|
||||
source: string
|
||||
}>(`/tld-prices/overview?${params.toString()}`)
|
||||
}
|
||||
|
||||
async getTldHistory(tld: string, days = 90) {
|
||||
|
||||
Reference in New Issue
Block a user