import React from 'react'
import { IconStatValue } from 'playbook-ui'

const IconStatValueDefault = (props) => {
  return (
    <div>
      <IconStatValue
          icon="lightbulb-on"
          text="Electric"
          unit="kw"
          value={64.18}
      />
      <br />
      <IconStatValue
          icon="calendar"
          text="deadline"
          unit="days"
          value={24}
      />
    </div>

  )
}

export default IconStatValueDefault

import React from 'react'
import { IconStatValue } from 'playbook-ui'

const IconStatValueSizes = (props) => {
  return (
    <div>
      <IconStatValue
          icon="car"
          size="sm"
          text="distance driven"
          unit="mi"
          value={158.3}
      />
      <br />
      <IconStatValue
          icon="car"
          size="md"
          text="distance driven"
          unit="mi"
          value={158.3}
      />
      <br />
      <IconStatValue
          icon="car"
          size="lg"
          text="distance driven"
          unit="mi"
          value={158.3}
      />
    </div>

  )
}

export default IconStatValueSizes

import React from 'react'
import { IconStatValue } from 'playbook-ui'

const IconStatValueVertical = (props) => {
  return (
    <div>
      <IconStatValue
          icon="broadcast-tower"
          orientation="vertical"
          text="Radio"
          unit="wkz"
          value={102.5}
      />
    </div>

  )
}

export default IconStatValueVertical

import React from 'react'
import { IconStatValue } from 'playbook-ui'

const IconStatValueColor = (props) => {
  return (
    <div>
      <IconStatValue
          icon="globe-europe"
          text="Mercury"
          unit="AU"
          value={0.39}
          variant="blue"
      />
      <br />
      <IconStatValue
          icon="planet-ringed"
          text="Venus"
          unit="AU"
          value={0.723}
          variant="royal"
      />
      <br />
      <IconStatValue
          icon="planet-moon"
          text="Earth"
          unit="AU"
          value={1.0}
          variant="purple"
      />
      <br />
      <IconStatValue
          icon="solar-system"
          text="Mars"
          unit="AU"
          value={1.524}
          variant="teal"
      />
      <br />
      <IconStatValue
          icon="globe-americas"
          text="Jupitar"
          unit="AU"
          value={5.203}
          variant="red"
      />
      <br />
      <IconStatValue
          icon="globe-africa"
          text="Saturn"
          unit="AU"
          value={9.539}
          variant="yellow"
      />
      <br />
      <IconStatValue
          icon="globe"
          text="Uranus"
          unit="AU"
          value={19.18}
          variant="green"
      />
      <br />
      <IconStatValue
          icon="globe"
          text="Uranus"
          unit="AU"
          value={19.18}
          variant="orange"
      />
    </div>

  )
}

export default IconStatValueColor