christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 14:15:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Enhance Buy Box warning badge with styled hover popup showing reasons and flags

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-29 10:08:44 +01:00
parent 02aa95d39d
commit 1dc06e8b3b
1 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/BuyBoxWarningBadge.tsx
+48 -10
View File
@@ -1,28 +1,66 @@
import React from 'react';
import React, { useState } from 'react';
interface BuyBoxWarningBadgeProps {
asin: string;
buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
}
const COUNTRY_FLAGS: Record<string, string> = {
DE: '🇩🇪',
FR: '🇫🇷',
IT: '🇮🇹',
UK: '🇬🇧',
ES: '🇪🇸',
};
export const BuyBoxWarningBadge: React.FC<BuyBoxWarningBadgeProps> = ({ asin, buyBoxLostMap }) => {
const [isHovered, setIsHovered] = useState(false);
if (!buyBoxLostMap || !asin) return null;
const data = buyBoxLostMap.get(asin.toUpperCase());
if (!data || data.countries.length === 0) return null;
const tooltipContent = data.countries
.map(c => `${c}: ${data.reasons[c] || 'Unknown'}`)
.join('\n');
return (
<div
className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-500/50 text-amber-400 text-[9px] font-bold uppercase tracking-tight cursor-help transition-all hover:bg-amber-500/30 hover:scale-105"
title={`⚠️ Buy Box Lost\n${tooltipContent}`}
className="relative inline-flex"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<span className="text-xs">⚠️</span>
<span>BB Lost</span>
<span className="text-amber-300/80">{data.countries.join(', ')}</span>
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-500/50 text-amber-400 text-[9px] font-bold uppercase tracking-tight cursor-help transition-all hover:bg-amber-500/30 hover:scale-105">
<span className="text-xs">⚠️</span>
<span>BB Lost</span>
<span className="text-amber-300/80">{data.countries.join(', ')}</span>
</div>
{/* Hover Popup */}
{isHovered && (
<div className="absolute z-50 left-0 top-full mt-1 w-56 bg-slate-900 border border-amber-500/30 rounded-lg shadow-xl shadow-black/50 animate-fade-in overflow-hidden">
<div className="bg-amber-500/20 px-3 py-2 border-b border-amber-500/30">
<span className="text-amber-400 text-[10px] font-black uppercase tracking-widest">
⚠️ Buy Box Lost
</span>
</div>
<div className="p-2 space-y-1.5">
{data.countries.map(country => (
<div
key={country}
className="flex items-start gap-2 px-2 py-1.5 rounded bg-slate-800/50 border border-white/5"
>
<span className="text-base">{COUNTRY_FLAGS[country] || '🏳️'}</span>
<div className="flex flex-col min-w-0">
<span className="text-[10px] font-black text-white uppercase tracking-tight">
{country}
</span>
<span className="text-[10px] text-amber-400/90 truncate" title={data.reasons[country] || 'Unknown'}>
{data.reasons[country] || 'Unknown'}
</span>
</div>
</div>
))}
</div>
</div>
)}
</div>
);
};