asi-calculator/features/prices/components/Price/PriceChange.tsx

22 lines
634 B
TypeScript
Raw Normal View History

2024-04-14 12:52:37 +02:00
'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 (
2024-04-14 12:52:37 +02:00
<span
className={`${styles.change} ${styleClasses}`}
title="24h change"
data-locale={locale}
>
{priceChange > 0 ? <TriangleUpIcon /> : <TriangleDownIcon />}
{Math.abs(priceChange).toFixed(1)}%
</span>
)
}