GoogleAIBuilder/KisStock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

..

Browse Source
This commit is contained in:
tindevil
2026-02-01 00:56:54 +09:00
parent 83491c08b9
commit 01acc19401
4 changed files with 94 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/CommonUI.tsx
View File

@@ -11,18 +11,18 @@ interface StatCardProps {
}
export const StatCard: React.FC<StatCardProps> = ({ title, value, change, isUp, icon }) => (
<div className="bg-white p-8 rounded-[3rem] shadow-sm border border-slate-100 flex items-start justify-between group hover:border-blue-100 transition-all">
<div>
<p className="text-[11px] font-black text-slate-400 mb-3 uppercase tracking-widest">{title}</p>
<h4 className="text-2xl font-black text-slate-900 leading-none">{value}</h4>
<div className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between group hover:border-blue-100 transition-all">
<div className="min-w-0 flex-1">
<p className="text-[10px] font-black text-slate-400 mb-1 uppercase tracking-widest truncate">{title}</p>
<h4 className="text-[18px] font-black text-slate-900 leading-none truncate">{value}</h4>
{change && (
<p className={`text-[11px] font-black mt-4 flex items-center gap-2 ${isUp ? 'text-emerald-500' : 'text-rose-500'}`}>
<p className={`text-[10px] font-black mt-2 flex items-center gap-1.5 ${isUp ? 'text-emerald-500' : 'text-rose-500'}`}>
{change}
</p>
)}
</div>
<div className="bg-slate-50 p-5 rounded-3xl group-hover:bg-blue-50 transition-colors">
{icon}
<div className="bg-slate-50 p-3 rounded-xl group-hover:bg-blue-50 transition-colors shrink-0 ml-3">
{React.cloneElement(icon as React.ReactElement, { size: 18 })}
</div>
</div>
);