SalesPulse.tsx

Go to the documentation of this file.

"use client";
import React, { useEffect, useState } from "react";
 
interface SalesPulseProps {
  value?: number;
}
 
export default function SalesPulse({ value }: SalesPulseProps) {
  const [pulseValue, setPulseValue] = useState<number>(value || 0);
  const [loading, setLoading] = useState(!value);
 
  useEffect(() => {
    if (value !== undefined) {
      setPulseValue(value);
      setLoading(false);
    }
  }, [value]);
 
  useEffect(() => {
    // If no value provided, refresh with random data every 30 seconds
    if (value === undefined) {
      const interval = setInterval(() => {
        setPulseValue(Math.floor(Math.random() * 5000) + 1000);
      }, 30000);
      
      return () => clearInterval(interval);
    }
  }, [value]);
 
  return (
    <div className="card" role="status" aria-live="polite">
      <div className="flex items-center justify-between mb-2">
        <div className="text-sm font-semibold">Sales pulse</div>
        <div className="text-xs text-muted">Live widget</div>
      </div>
      <div className="h-48 rounded-md bg-surface border border-border flex items-center justify-center">
        {loading ? (
          <div className="text-muted">Loading...</div>
        ) : (
          <div className="text-3xl font-extrabold" aria-atomic="true">
            ${pulseValue?.toLocaleString()}
          </div>
        )}
      </div>
    </div>
  );
}