Stat

Display a label, value, and sub-value


import { Stat } from '@kalidao/reality'

<Stat
  label="Current time"
  meta={Intl.DateTimeFormat().resolvedOptions().timeZone}
  value={new Date().toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  })}
/>

<Stat
  label="Current time"
  meta={Intl.DateTimeFormat().resolvedOptions().timeZone}
  value={new Date().toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  })}
/>

Open in Playroom

Props
#

name	type	default
label* Required	ReactNode	-
meta	ReactNode	-
size	"small" \| "medium"	medium
value* Required	ReactNode	-

Sizes
#

<Stack>
  <Stat
    label="Current time"
    meta={Intl.DateTimeFormat().resolvedOptions().timeZone}
    size="medium"
    value={new Date().toLocaleTimeString([], {
      hour: '2-digit',
      minute: '2-digit',
    })}
  />
  <Stat
    label="Current time"
    meta={Intl.DateTimeFormat().resolvedOptions().timeZone}
    size="small"
    value={new Date().toLocaleTimeString([], {
      hour: '2-digit',
      minute: '2-digit',
    })}
  />
</Stack>

<Stack>
  <Stat
    label="Current time"
    meta={Intl.DateTimeFormat().resolvedOptions().timeZone}
    size="medium"
    value={new Date().toLocaleTimeString([], {
      hour: '2-digit',
      minute: '2-digit',
    })}
  />
  <Stat
    label="Current time"
    meta={Intl.DateTimeFormat().resolvedOptions().timeZone}
    size="small"
    value={new Date().toLocaleTimeString([], {
      hour: '2-digit',
      minute: '2-digit',
    })}
  />
</Stack>

Open in Playroom

Edit on GitHub

Props#

Sizes#

Props
#

Sizes
#