ProgressCard

import { Badge, Card, Grid, Progress, Stack, Typography } from '@ilomee/aura-react';

const CARDS = [
  { id: 'onboarding', title: 'Onboarding', note: '7 of 10 steps done', value: 70, tone: 'warning' },
  { id: 'storage', title: 'Storage', note: '94 GB of 100 GB used', value: 94, tone: 'success' },
] as const;

// Card, Progress и Badge. Порог, по которому выбирается тон, — правило вызывающего, и это
// единственное, что рецепт знал, а этот пример не знает.
export default function Demo() {
  return (
    <Grid cols={{ base: 1, md: 2 }} gap={4} style={{ width: '100%' }}>
      {CARDS.map((card) => (
        <Card key={card.id}>
          <Stack gap={2}>
            <Stack direction="row" justify="space-between" align="center" gap={3}>
              <Typography variant="h3">{card.title}</Typography>
              <Badge tone={card.tone}>{card.value}%</Badge>
            </Stack>
            <Typography variant="body" tone="muted">
              {card.note}
            </Typography>
            <Progress value={card.value} label={card.title} />
          </Stack>
        </Card>
      ))}
    </Grid>
  );
}