Import Tripoli Cloud frontend prototype
React/TypeScript/Vite/Tailwind prototype from the design session (login, dashboard, photos, backups, settings views with mocked API layer). Infra work (Rust services, Ansible, OpenTofu) follows in subsequent commits. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
commit
5dbd3b96f6
73 changed files with 4789 additions and 0 deletions
23
app/src/components/dashboard/StatCard.tsx
Normal file
23
app/src/components/dashboard/StatCard.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import type { StatItem } from '../../types';
|
||||
import { DataIcon } from '../icons/DataIcon';
|
||||
|
||||
const TONE_CLASSES: Record<StatItem['tone'], string> = {
|
||||
brand: 'bg-selected text-brand-soft',
|
||||
success: 'bg-success/16 text-success',
|
||||
violet: 'bg-violet/16 text-violet',
|
||||
};
|
||||
|
||||
export function StatCard({ stat }: { stat: StatItem }) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-line bg-panel p-[18px] backdrop-blur-md">
|
||||
<div className="mb-3.5 flex items-center justify-between gap-2.5">
|
||||
<span className="text-[12.5px] font-semibold text-ink-soft">{stat.label}</span>
|
||||
<span className={`flex h-7 w-7 items-center justify-center rounded-[9px] ${TONE_CLASSES[stat.tone]}`}>
|
||||
<DataIcon name={stat.icon} size={15} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="m-0 mb-1 text-[27px] font-extrabold tracking-tight text-ink">{stat.value}</p>
|
||||
<p className="m-0 text-xs text-ink-soft">{stat.note}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue