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

4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1309,"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"; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["avatar"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"index.tsx","content":"$51","type":"registry:ui","target":"components/kibo-ui/ticker/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]