Currency

import React from 'react'

import Currency from '../_currency'

const CurrencyVariants = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          emphasized={false}
          label="Emphasized False"
          marginBottom="md"
          size="sm"
          {...props}
      />
      <Currency
          amount="342"
          label="Light"
          marginBottom="md"
          size="sm"
          symbol="€"
          variant="light"
          {...props}
      />
      <Currency
          amount="45"
          label="Bold"
          size="sm"
          unit="/mo"
          variant="bold"
          {...props}
      />
    </>
  )
}

export default CurrencyVariants

import React from 'react'

import Currency from '../_currency'

const CurrencySize = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Small"
          marginBottom="md"
          size="sm"
          {...props}
      />
      <Currency
          amount="342"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
          {...props}
      />
      <Currency
          amount="45"
          label="Large"
          size="lg"
          unit="/mo"
          {...props}
      />
    </>
  )
}

export default CurrencySize

import React from 'react'

import Currency from '../_currency'

const CurrencyAlignment = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Left"
          size="sm"
          {...props}
      />
      <Currency
          align="center"
          amount="342"
          label="Center"
          size="sm"
          symbol="€"
          {...props}
      />
      <Currency
          align="right"
          amount="45"
          label="Right"
          size="sm"
          unit="/mo"
          {...props}
      />
    </>
  )
}

export default CurrencyAlignment

import React from 'react'

import Currency from '../_currency'

const CurrencyNoSymbol = (props) => {
  return (
    <Currency
        amount="309"
        label="Sales"
        size="md"
        symbol=""
        unit="/week"
        {...props}
    />
  )
}

export default CurrencyNoSymbol

import React from 'react'

import Currency from '../_currency'

const CurrencyAbbreviated = (props) => {
  return (
    <>
      <Currency
          abbreviate
          amount="2,500"
          label="Thousands (with Unit)"
          marginBottom="md"
          size="md"
          unit="/mo"
          {...props}
      />
      <Currency
          abbreviate
          amount="45300000"
          label="Millions"
          marginBottom="md"
          size="md"
          {...props}
      />
      <Currency
          abbreviate
          amount="6,700,000,000"
          label="Billions"
          marginBottom="md"
          size="md"
          {...props}
      />
      <Currency
          abbreviate
          amount="9,900,000,000,000"
          label="Trillions"
          size="md"
          {...props}
      />
    </>
  )
}

export default CurrencyAbbreviated

import React from 'react'

import Currency from '../_currency'

const CurrencyMatchingDecimals = (props) => {
  return (
    <>
      <Currency
          amount="372.12"
          decimals="matching"
          label="Small"
          marginBottom="md"
          size="sm"
          unit="/day"
          {...props}
      />
      <Currency
          amount="30,327.43"
          decimals="matching"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
          {...props}
      />
      <Currency
          amount="621,953.99"
          decimals="matching"
          label="Large"
          size="lg"
          {...props}
      />
    </>
  )
}

export default CurrencyMatchingDecimals