bitcoin price tracker

 import React, { useEffect, useRef } from 'react';

import { TrendingUp, TrendingDown } from 'lucide-react';

import { formatPrice, formatPercentage } from '../utils/formatters';

interface PriceDisplayProps {

  price: number;

  change24h: number;

}

export const PriceDisplay: React.FC<PriceDisplayProps> = ({ price, change24h }) => {

  const isPositive = change24h >= 0;

  const prevPriceRef = useRef(price);

  const priceElementRef = useRef<HTMLSpanElement>(null);

  

  useEffect(() => {

    if (price !== prevPriceRef.current && priceElementRef.current) {

      priceElementRef.current.classList.add('price-flash');

      

      setTimeout(() => {

        if (priceElementRef.current) {

          priceElementRef.current.classList.remove('price-flash');

        }

      }, 1000);

      

      prevPriceRef.current = price;

    }

  }, [price]);

  

  return (

    <div className="bg-white rounded-lg p-6 shadow-lg">

      <h2 className="text-xl font-semibold text-gray-700 mb-2">Bitcoin Price</h2>

      <div className="flex items-center space-x-4">

        <span 

          ref={priceElementRef}

          className="text-4xl font-bold transition-colors duration-300"

        >

          {formatPrice(price)}

        </span>

        <div className={`flex items-center ${isPositive ? 'text-green-500' : 'text-red-500'}`}>

          {isPositive ? <TrendingUp size={24} /> : <TrendingDown size={24} />}

          <span className="ml-1 font-semibold">

            {formatPercentage(change24h)}

          </span>

        </div>

      </div>

    </div>

  );

};