Stat

'use client'

import { Stat } from '@saas-ui/react'

export const StatBasic = () => {
  return (
    <Stat.Root>
      <Stat.Label>Unique visitors</Stat.Label>
      <Stat.ValueText>192.1k</Stat.ValueText>
    </Stat.Root>
  )
}

'use client'

import { Stat } from '@saas-ui/react'

export const StatWithFormatOptions = () => {
  return (
    <Stat.Root>
      <Stat.Label>Revenue</Stat.Label>
      <Stat.ValueText
        value={935.4}
        formatOptions={{ style: 'currency', currency: 'USD' }}
      />
    </Stat.Root>
  )
}

'use client'

import { Stat } from '@saas-ui/react'

export const StatWithIndicator = () => {
  return (
    <Stat.Root>
      <Stat.Label>Unique visitors</Stat.Label>
      <Stat.ValueText>192.1k</Stat.ValueText>
      <Stat.DownTrend variant="plain" px="0">
        1.9%
      </Stat.DownTrend>
    </Stat.Root>
  )
}

'use client'

import { InfoTip, Stat } from '@saas-ui/react'

export const StatWithInfoTip = () => {
  return (
    <Stat.Root>
      <Stat.Label>
        Unique <InfoTip>Some info</InfoTip>
      </Stat.Label>
      <Stat.ValueText>192.1k</Stat.ValueText>
    </Stat.Root>
  )
}

'use client'

import { Stat } from '@saas-ui/react'

export const StatWithValueUnit = () => {
  return (
    <Stat.Root>
      <Stat.Label>Time to complete</Stat.Label>
      <Stat.ValueText alignItems="baseline">
        3 <Stat.ValueUnit>hr</Stat.ValueUnit>
        20 <Stat.ValueUnit>min</Stat.ValueUnit>
      </Stat.ValueText>
    </Stat.Root>
  )
}

'use client'

import { Progress, Stat } from '@saas-ui/react'

export const StatWithProgressBar = () => {
  return (
    <Stat.Root maxW="240px">
      <Stat.Label>This week</Stat.Label>
      <Stat.ValueText
        value={1340}
        formatOptions={{
          currency: 'USD',
          style: 'currency',
          maximumFractionDigits: 0,
        }}
      />
      <Stat.HelpText mb="2">+12% from last week</Stat.HelpText>
      <Progress.Root>
        <Progress.Track>
          <Progress.Range />
        </Progress.Track>
      </Progress.Root>
    </Stat.Root>
  )
}

'use client'

import { HStack, Icon } from '@chakra-ui/react'
import { Stat } from '@saas-ui/react'
import { LuDollarSign } from 'react-icons/lu'

export const StatWithIcon = () => {
  return (
    <Stat.Root maxW="240px" borderWidth="1px" p="4" rounded="md">
      <HStack justify="space-between">
        <Stat.Label>Sales</Stat.Label>
        <Icon color="fg.muted">
          <LuDollarSign />
        </Icon>
      </HStack>
      <Stat.ValueText>$4.24k</Stat.ValueText>
    </Stat.Root>
  )
}

'use client'

import { HStack } from '@chakra-ui/react'
import { Stat } from '@saas-ui/react'

export const StatWithTrend = () => {
  return (
    <Stat.Root>
      <Stat.Label>Unique </Stat.Label>
      <HStack>
        <Stat.ValueText
          value={8456.4}
          formatOptions={{ style: 'currency', currency: 'USD' }}
        />
        <Stat.UpTrend>12%</Stat.UpTrend>
      </HStack>
      <Stat.HelpText>since last month</Stat.HelpText>
    </Stat.Root>
  )
}