Crowmate/Wyview
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: change the DA to something more readable

Browse Source
This commit is contained in:
Pierre Ryssen
2026-03-11 12:26:45 +01:00
parent cd15c81b53
commit 9642f2511a
22 changed files with 136 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/StatCard.tsx
View File

@@ -8,7 +8,7 @@ interface StatCardProps {
}
const accentColors = {
green: { val: "text-[#4aff8c]", border: "border-t-[#4aff8c]/40" },
green: { val: "text-acid-green", border: "border-t-acid-green/40" },
red: { val: "text-red-400", border: "border-t-red-500/40" },
blue: { val: "text-blue-400", border: "border-t-blue-400/40" },
purple: { val: "text-purple-400", border: "border-t-purple-400/40" },
@@ -18,23 +18,23 @@ const accentColors = {
export default function StatCard({ label, value, sub, accent = "green", delta, deltaUp }: StatCardProps) {
const colors = accentColors[accent];
return (
<div className={`bg-[#0d1210] border border-[#1a2a1a] border-t-2 ${colors.border} rounded-sm p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}>
<div className="text-[9px] font-mono tracking-[0.25em] text-[#3a5a3a] uppercase mb-3">
<div className={`bg-wy-surface border border-wy-border border-t-2 ${colors.border} rounded-lg p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}>
<div className="text-xs font-mono tracking-widest text-wy-text-secondary uppercase mb-3">
{label}
</div>
<div className={`text-3xl font-black tracking-tight ${colors.val} leading-none mb-1`}>
{value === "—" || value === 0 ? <span className="text-[#2a3a2a]">—</span> : value}
<div className={`text-4xl font-black tracking-tight ${colors.val} leading-none mb-1`}>
{value === "—" || value === 0 ? <span className="text-wy-text-secondary">—</span> : value}
</div>
{sub && (
<div className="text-[11px] text-[#3a4a3a] font-mono mt-1">{sub}</div>
<div className="text-xs text-wy-text-secondary font-mono mt-1">{sub}</div>
)}
{delta && (
<div className={`absolute top-4 right-4 text-[9px] font-mono tracking-wider px-2 py-1 rounded-sm border ${
<div className={`absolute top-4 right-4 text-xs font-mono tracking-wider px-2 py-1 rounded-md border ${
deltaUp
? "text-[#4aff8c] bg-[#4aff8c]/5 border-[#4aff8c]/20"
: "text-red-400 bg-red-500/5 border-red-500/20"
? "text-acid-green bg-acid-green/10 border-acid-green/30"
: "text-red-400 bg-red-500/10 border-red-500/30"
}`}>
{deltaUp ? "+" : ""}{delta}
{deltaUp ? "▲" : "▼"} {delta}
</div>
)}
</div>