asi-calculator/features/prices/components/Price/PriceChange.tsx
Matthias Kretschmann 0d08ba807b
better number formatting (#9)
* tweak number display

* select whole amount upon input focus

* handle letter input

* number formatting
2024-04-16 12:20:29 +02:00

22 lines
634 B
TypeScript

'use client'
import { TriangleUpIcon, TriangleDownIcon } from '@radix-ui/react-icons'
import styles from './PriceChange.module.css'
import { useLocale } from '@/features/prices/hooks/use-locale'
export function PriceChange({ priceChange }: { priceChange: number }) {
const locale = useLocale()
const styleClasses = priceChange > 0 ? styles.positive : styles.negative
return (
<span
className={`${styles.change} ${styleClasses}`}
title="24h change"
data-locale={locale}
>
{priceChange > 0 ? <TriangleUpIcon /> : <TriangleDownIcon />}
{Math.abs(priceChange).toFixed(1)}%
</span>
)
}