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

23 lines
620 B
TypeScript
Raw Normal View History

2024-04-14 12:52:37 +02:00
import { usePrices, type PriceCoingecko } from '@/features/prices'
import { PriceChange } from './PriceChange'
2024-04-14 12:52:37 +02:00
import styles from './Price.module.css'
2024-04-14 12:52:37 +02:00
export function Price({ price }: { price: PriceCoingecko }) {
const { isValidating, isLoading } = usePrices()
const feedbackClasses = isLoading
? 'isLoading'
: isValidating
? 'isValidating'
: ''
return (
<p className={styles.price}>
2024-04-14 19:44:10 +02:00
<span className={`${styles.fiat} ${feedbackClasses}`}>${price.usd}</span>
2024-04-14 12:52:37 +02:00
{price?.usd_24h_change ? (
<PriceChange priceChange={price.usd_24h_change} />
) : null}
</p>
)
}