Doormile/Doormilexpress_console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates on the astryx desing

Browse Source
This commit is contained in:
dharaneesh-r
2026-08-14 16:09:14 +05:30
parent d3dd687a8d
commit a46212f291
106 changed files with 10244 additions and 24738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/nearle_components/StatCard.js
View File

@@ -8,9 +8,12 @@ import { Text } from '@astryxdesign/core/Text';
import { Skeleton } from '@astryxdesign/core/Skeleton';
// ==============================|| STAT / KPI CARD (Doormile-style) ||============================== //
// Clean metric card: muted label, large value, a single soft-tinted rounded
// tile holding the icon. No coloured top-stripe, no rainbow — colour appears
// only in the small tile so a row of cards reads calm and corporate.
// Clean metric card: muted eyebrow label, large tabular value, a single
// soft-tinted rounded tile holding the icon (with a faint matching ring for
// depth). A low resting elevation lifts the tile off the page instead of
// reading as a flat bordered box. No coloured top-stripe, no rainbow —
// colour appears only in the icon tile so a row of cards reads calm and
// corporate.
//
// `icon` is a rendered node, e.g. icon={<MdLocalShipping size={20} />}.
// `color` is a hex accent (defaults to brand red); `caption` is the small
@@ -24,16 +27,16 @@ import { Skeleton } from '@astryxdesign/core/Skeleton';
export default function StatCard({ title, value, icon, color = '#000000', caption, loading = false }) {
return (
<Card height="100%" padding={3}>
<HStack justify="between" vAlign="center" gap={1}>
<Card height="100%" padding={2} elevation="low">
<HStack justify="between" vAlign="center" gap={2}>
<VStack gap={0.5} padding={0} minWidth={0} width="100%">
<Text type="supporting" maxLines={1}>
<Text type="supporting" size="xsm" weight="semibold" maxLines={1}>
{title}
</Text>
{loading ? (
<Skeleton width={72} height={30} radius={2} />
<Skeleton width={60} height={26} radius={2} />
) : (
<Text size="2xl" weight="bold" display="block" maxLines={1} hasTabularNumbers>
<Text size="xl" weight="bold" display="block" maxLines={1} hasTabularNumbers>
{value}
</Text>
)}
@@ -45,9 +48,15 @@ export default function StatCard({ title, value, icon, color = '#000000', captio
</VStack>
{icon && (
<Center
width={42}
height={42}
style={{ flexShrink: 0, borderRadius: 'var(--radius-element)', backgroundColor: `${color}14`, color }}
width={36}
height={36}
style={{
flexShrink: 0,
borderRadius: 'var(--radius-element)',
backgroundColor: `${color}16`,
color,
border: `1px solid ${color}2A`
}}
>
{icon}
</Center>