{isPositiveChange ? "Up icon" : "Down icon"}

"use client"; import type { HTMLAttributes, ReactNode } from "react"; import { createContext, memo, useContext, useMemo } from "react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { cn } from "@/lib/utils"; type TickerContextValue = { formatter: Intl.NumberFormat; }; const DEFAULT_CURRENCY = "USD"; const DEFAULT_LOCALE = "en-US"; const defaultFormatter = new Intl.NumberFormat(DEFAULT_LOCALE, { style: "currency", currency: DEFAULT_CURRENCY, minimumFractionDigits: 2, maximumFractionDigits: 2, }); const TickerContext = createContext({ formatter: defaultFormatter, }); export const useTickerContext = () => useContext(TickerContext); export type TickerProps = HTMLAttributes & { currency?: string; locale?: string; }; export const Ticker = memo( ({ children, className, currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE, ...props }: TickerProps & { children: ReactNode }) => { const formatter = useMemo(() => { try { return new Intl.NumberFormat(locale, { style: "currency", currency: currency.toUpperCase(), minimumFractionDigits: 2, maximumFractionDigits: 2, }); } catch { return defaultFormatter; } }, [currency, locale]); return ( ); } ); Ticker.displayName = "Ticker"; export type TickerIconProps = HTMLAttributes & { src?: string; symbol?: string; asChild?: boolean; }; export const TickerIcon = memo( ({ src, symbol, className, asChild, children, ...props }: TickerIconProps) => { if (asChild) { return (

{children}

); } return ( {symbol?.slice(0, 2).toUpperCase()} ); } ); TickerIcon.displayName = "TickerIcon"; export type TickerSymbolProps = HTMLAttributes & { symbol: string; }; export const TickerSymbol = memo( ({ symbol, className, ...props }: TickerSymbolProps) => ( {symbol.toUpperCase()} ) ); TickerSymbol.displayName = "TickerSymbol"; export type TickerPriceProps = HTMLAttributes & { price: number; }; export const TickerPrice = memo( ({ price, className, ...props }: TickerPriceProps) => { const context = useTickerContext(); const formattedPrice = useMemo( () => context.formatter.format(price), [price, context] ); return ( {formattedPrice} ); } ); TickerPrice.displayName = "TickerPrice"; export type TickerPriceChangeProps = HTMLAttributes & { change: number; isPercent?: boolean; }; export const TickerPriceChange = memo( ({ change, isPercent, className, ...props }: TickerPriceChangeProps) => { const isPositiveChange = useMemo(() => change >= 0, [change]); const context = useTickerContext(); const changeFormatted = useMemo(() => { if (isPercent) { return `${change.toFixed(2)}%`; } return context.formatter.format(change); }, [change, isPercent, context]); return ( {changeFormatted} ); } ); TickerPriceChange.displayName = "TickerPriceChange";

ticker

Instalação

Registry dependencies