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

Refine StockBadge design to Top 50 style and move to title row across all views

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-27 18:23:18 +01:00
parent f0d920de84
commit 6541f6655a
8 changed files with 70 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/StockBadge.tsx
+9 -6
View File
@@ -11,24 +11,27 @@ export const StockBadge: React.FC<StockBadgeProps> = ({ stock }) => {
const isLow = stock < 50;
const isOut = stock <= 0;
let colorClass = "bg-emerald-500/20 text-emerald-400 border-emerald-500/30";
let themeClasses = "from-indigo-600 to-purple-600 border-indigo-400/50";
let icon = "📦";
if (isOut) {
colorClass = "bg-rose-500/20 text-rose-400 border-rose-500/30";
themeClasses = "from-rose-600 to-red-700 border-rose-400/50";
icon = "❌";
} else if (isLow) {
colorClass = "bg-amber-500/20 text-amber-400 border-amber-500/30";
themeClasses = "from-amber-500 to-orange-600 border-amber-400/50";
icon = "⚠️";
}
return (
<div
className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-black border uppercase tracking-tighter shadow-sm ${colorClass}`}
className={`inline-flex items-center gap-1.5 px-2 py-1 rounded bg-gradient-to-br text-white border shadow-lg transition-all hover:scale-105 group/stock ${themeClasses}`}
title={`Total Stock (GMBH): ${stock}`}
>
<span className="text-xs">{icon}</span>
<span>{stock.toLocaleString('de-DE')}</span>
<span className="text-xs filter drop-shadow-sm">{icon}</span>
<div className="flex flex-col leading-none">
<span className="text-[8px] font-black uppercase tracking-tighter opacity-80">Stock</span>
<span className="text-[10px] font-bold tracking-tight">{stock.toLocaleString('de-DE')}</span>
</div>
</div>
);
};