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

style: refine Product Info layout in Forecast View to match reference image

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-26 16:35:16 +01:00
parent ccdbcb2824
commit 9b7b9e65db
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ForecastView.tsx
+21 -17
View File
@@ -18,17 +18,12 @@ interface ForecastViewProps {
const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// Top 50 Badge Component (reused logic)
const Top50Badge: React.FC<{ rank: number; label: string; theme?: 'amber' | 'indigo' | 'blue' }> = ({ rank, label, theme = 'amber' }) => {
const themeClasses = {
amber: 'bg-amber-500/10 text-amber-500 border-amber-500/20',
indigo: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20',
blue: 'bg-blue-500/10 text-blue-400 border-blue-500/20'
};
// Top 50 Badge Component (matched to image)
const Top50Badge: React.FC<{ rank: number; label: string; theme?: 'amber' | 'indigo' | 'blue' }> = ({ rank, label }) => {
return (
<div className={`flex items-center gap-1 px-1.5 py-0.5 rounded border text-[9px] font-black uppercase tracking-tighter shadow-sm ${themeClasses[theme]}`}>
<span className="opacity-70">{label}</span>
<span className="text-sm">#{rank}</span>
<div className="flex items-center gap-1.5 px-2 py-1 rounded bg-[#8b5cf6] text-white border border-white/10 shadow-lg">
<span className="text-xs">🏆</span>
<span className="text-[10px] font-black uppercase tracking-tighter">{label} {rank}</span>
</div>
);
};
@@ -227,16 +222,25 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
return (
<tr key={p.asin} className="hover:bg-indigo-500/5 transition-colors group">
<td className="px-6 py-4">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<div className="flex flex-col gap-1.5">
{/* ID Row */}
<div className="flex items-center gap-3">
{ranks.map((r, i) => (
<Top50Badge key={i} rank={r.rank} label={r.label} theme={r.theme} />
<Top50Badge key={i} rank={r.rank} label={r.label} />
))}
<span className="font-black text-xs text-indigo-400 uppercase tracking-tighter">{p.sku}</span>
<span className="text-[10px] font-bold text-slate-500 bg-slate-800 px-1.5 py-0.5 rounded border border-white/5">{p.asin}</span>
<span className="font-black text-sm text-[#818cf8] uppercase tracking-tight">{p.sku}</span>
<div className="px-2 py-0.5 rounded bg-slate-800/80 border border-white/5 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
{p.asin}
</div>
</div>
{/* Title Row */}
<div className="text-[13px] font-medium text-slate-100 leading-snug group-hover:text-white transition-colors">
{p.title}
</div>
{/* Line Row */}
<div className="text-[10px] font-black text-[#ec4899] uppercase tracking-[0.15em]">
{p.line}
</div>
<span className="text-[11px] text-white/70 truncate w-[240px] leading-tight" title={p.title}>{p.title}</span>
<span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{p.line}</span>
</div>
</td>
<td className="px-6 py-4 text-right font-mono font-bold text-slate-400">