fix: Tooltip behavior & Links (INTEL, MARKET, RADAR)
Changes: - Fixed hover/tooltip issue: Tooltips now only trigger on the specific element, not the entire row. - Added explicit 'Details' link to TLD table in INTEL view. - Added clickable TLD badges in INTEL view. - Standardized Tooltip implementation across all views. - Ensured consistent 'Award-Winning' style for all interactive elements.
This commit is contained in:
@ -31,9 +31,9 @@ import Link from 'next/link'
|
|||||||
|
|
||||||
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
|
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="relative flex items-center group">
|
<div className="relative flex items-center group/tooltip w-fit">
|
||||||
{children}
|
{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:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
|
<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}
|
{content}
|
||||||
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
|
||||||
</div>
|
</div>
|
||||||
@ -340,7 +340,7 @@ export default function IntelPage() {
|
|||||||
<div className="col-span-2 text-right"><SortableHeader label="Renewal" field="price" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="right" tooltip="Estimated annual renewal cost" /></div>
|
<div className="col-span-2 text-right"><SortableHeader label="Renewal" field="price" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="right" tooltip="Estimated annual renewal cost" /></div>
|
||||||
<div className="col-span-2 text-center"><SortableHeader label="Trend (1y)" field="change" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" /></div>
|
<div className="col-span-2 text-center"><SortableHeader label="Trend (1y)" field="change" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" /></div>
|
||||||
<div className="col-span-2 text-center"><SortableHeader label="Risk Level" field="risk" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" tooltip="Risk of price hikes or restrictions" /></div>
|
<div className="col-span-2 text-center"><SortableHeader label="Risk Level" field="risk" currentSort={sortField} currentDirection={sortDirection} onSort={handleSort} align="center" tooltip="Risk of price hikes or restrictions" /></div>
|
||||||
<div className="col-span-2 text-right"><span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600 py-2 block">Provider</span></div>
|
<div className="col-span-2 text-right"><span className="text-[10px] font-bold uppercase tracking-widest text-zinc-600 py-2 block">Action</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="divide-y divide-white/5">
|
<div className="divide-y divide-white/5">
|
||||||
{filteredData.map((tld) => {
|
{filteredData.map((tld) => {
|
||||||
@ -351,7 +351,9 @@ export default function IntelPage() {
|
|||||||
<div key={tld.tld} className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-white/[0.04] transition-all group relative">
|
<div key={tld.tld} className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-white/[0.04] transition-all group relative">
|
||||||
{/* TLD */}
|
{/* TLD */}
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<span className="font-mono font-bold text-white text-lg">.{tld.tld}</span>
|
<Link href={`/terminal/intel/${tld.tld}`} className="font-mono font-bold text-white text-lg hover:text-emerald-400 transition-colors">
|
||||||
|
.{tld.tld}
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Price */}
|
{/* Price */}
|
||||||
@ -396,15 +398,21 @@ export default function IntelPage() {
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Provider */}
|
{/* Action / Provider */}
|
||||||
<div className="col-span-2 text-right">
|
<div className="col-span-2 flex justify-end items-center gap-3">
|
||||||
{tld.cheapest_registrar ? (
|
{tld.cheapest_registrar && (
|
||||||
<a href={tld.cheapest_registrar_url || '#'} target="_blank" className="text-xs text-zinc-500 hover:text-white transition-colors">
|
<Tooltip content={`Best price at ${tld.cheapest_registrar}`}>
|
||||||
{tld.cheapest_registrar} <ExternalLink className="w-3 h-3 inline ml-0.5" />
|
<a href={tld.cheapest_registrar_url || '#'} target="_blank" className="text-xs text-zinc-500 hover:text-white transition-colors truncate max-w-[80px]">
|
||||||
|
{tld.cheapest_registrar}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
</Tooltip>
|
||||||
<span className="text-xs text-zinc-600">-</span>
|
|
||||||
)}
|
)}
|
||||||
|
<Link
|
||||||
|
href={`/terminal/intel/${tld.tld}`}
|
||||||
|
className="w-8 h-8 flex items-center justify-center rounded-lg border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-600 hover:bg-white/5 transition-all"
|
||||||
|
>
|
||||||
|
<ArrowRight className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@ -417,7 +425,8 @@ export default function IntelPage() {
|
|||||||
{filteredData.map((tld) => {
|
{filteredData.map((tld) => {
|
||||||
const isTrap = tld.min_renewal_price > tld.min_price * 1.5
|
const isTrap = tld.min_renewal_price > tld.min_price * 1.5
|
||||||
return (
|
return (
|
||||||
<div key={tld.tld} className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 active:bg-zinc-900/60 transition-colors">
|
<Link href={`/terminal/intel/${tld.tld}`} key={tld.tld}>
|
||||||
|
<div className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 active:bg-zinc-900/60 transition-colors">
|
||||||
<div className="flex justify-between items-start mb-3">
|
<div className="flex justify-between items-start mb-3">
|
||||||
<span className="font-mono font-bold text-white text-xl">.{tld.tld}</span>
|
<span className="font-mono font-bold text-white text-xl">.{tld.tld}</span>
|
||||||
<div className={clsx("px-2 py-1 rounded text-[10px] uppercase font-bold",
|
<div className={clsx("px-2 py-1 rounded text-[10px] uppercase font-bold",
|
||||||
@ -442,15 +451,19 @@ export default function IntelPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{tld.cheapest_registrar && (
|
<div className="pt-3 border-t border-white/5 flex items-center justify-between">
|
||||||
<div className="pt-3 border-t border-white/5 text-center">
|
<div className="flex items-center gap-1 text-xs text-zinc-500">
|
||||||
<span className="text-xs text-zinc-500">Best price at </span>
|
<span>Provider:</span>
|
||||||
<a href={tld.cheapest_registrar_url || '#'} className="text-xs text-white font-medium hover:underline">
|
<span className="text-white font-medium truncate max-w-[100px]">
|
||||||
{tld.cheapest_registrar}
|
{tld.cheapest_registrar || '-'}
|
||||||
</a>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className="flex items-center gap-1 text-emerald-400 text-xs font-bold">
|
||||||
|
Details <ArrowRight className="w-3 h-3" />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -141,9 +141,9 @@ function parseTimeToSeconds(timeStr?: string): number {
|
|||||||
// Tooltip Component
|
// Tooltip Component
|
||||||
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
|
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="relative flex items-center group">
|
<div className="relative flex items-center group/tooltip w-fit">
|
||||||
{children}
|
{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:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
|
<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}
|
{content}
|
||||||
{/* Arrow */}
|
{/* Arrow */}
|
||||||
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
|
||||||
|
|||||||
@ -40,9 +40,9 @@ import Link from 'next/link'
|
|||||||
|
|
||||||
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
|
function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="relative flex items-center group">
|
<div className="relative flex items-center group/tooltip w-fit">
|
||||||
{children}
|
{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:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
|
<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}
|
{content}
|
||||||
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user