MetricRow

import { MetricRow } from 'twenty-ui/components/data-display';
import { IconFiles } from 'twenty-ui/icon';

export const ImportMetric = () => (
  <MetricRow
    startIcon={<IconFiles size={14} />}
    value="75 of 100"
    progress={75}
  >
    Imported files
  </MetricRow>
);

import { MetricRow } from 'twenty-ui/components/data-display';

export const CompletedMetric = () => (
  <MetricRow value={0}>Completed imports</MetricRow>
);

import { MetricRow } from 'twenty-ui/components/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const FormattedStorageMetric = () => (
  <MetricRow
    value={<Text render={<bdi />}>12 / 20 GB</Text>}
    progress={60}
    progressValueText="12 of 20 gigabytes used"
  >
    <Text render={<strong />}>Storage</Text>
  </MetricRow>
);