ticker

1"use client";
2 
3import type { HTMLAttributes, ReactNode } from "react";
4import { createContext, memo, useContext, useMemo } from "react";
5import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
6import { cn } from "@/lib/utils";
7 
8type TickerContextValue = {
9  formatter: Intl.NumberFormat;
10};
11 
12const DEFAULT_CURRENCY = "USD";
13const DEFAULT_LOCALE = "en-US";
14 
15const defaultFormatter = new Intl.NumberFormat(DEFAULT_LOCALE, {
16  style: "currency",
17  currency: DEFAULT_CURRENCY,
18  minimumFractionDigits: 2,
19  maximumFractionDigits: 2,
20});
21 
22const TickerContext = createContext<TickerContextValue>({
23  formatter: defaultFormatter,
24});
25 
26export const useTickerContext = () => useContext(TickerContext);
27 
28export type TickerProps = HTMLAttributes<HTMLButtonElement> & {
29  currency?: string;
30  locale?: string;
31};
32 
33export const Ticker = memo(
34  ({
35    children,
36    className,
37    currency = DEFAULT_CURRENCY,
38    locale = DEFAULT_LOCALE,
39    ...props
40  }: TickerProps & { children: ReactNode }) => {
41    const formatter = useMemo(() => {
42      try {
43        return new Intl.NumberFormat(locale, {
44          style: "currency",
45          currency: currency.toUpperCase(),
46          minimumFractionDigits: 2,
47          maximumFractionDigits: 2,
48        });
49      } catch {
50        return defaultFormatter;
51      }
52    }, [currency, locale]);
53 
54    return (
55      <TickerContext.Provider value={{ formatter }}>
56        <button
57          className={cn(
58            "inline-flex items-center gap-1.5 whitespace-nowrap align-middle",
59            className
60          )}
61          type="button"
62          {...props}
63        >
64          {children}
65        </button>
66      </TickerContext.Provider>
67    );
68  }
69);
70Ticker.displayName = "Ticker";
71 
72export type TickerIconProps = HTMLAttributes<HTMLImageElement> & {
73  src?: string;
74  symbol?: string;
75  asChild?: boolean;
76};
77 
78export const TickerIcon = memo(
79  ({
80    src,
81    symbol,
82    className,
83    asChild,
84    children,
85    ...props
86  }: TickerIconProps) => {
87    if (asChild) {
88      return (
89        <div
90          className={cn(
91            "overflow-hidden rounded-full border border-border bg-muted",
92            className
93          )}
94        >
95          {children}
96        </div>
97      );
98    }
99 
100    return (
101      <Avatar className={cn("size-7 border border-border bg-muted", className)}>
102        <AvatarImage src={src} {...props} />
103        <AvatarFallback className="font-semibold text-muted-foreground text-sm">
104// … truncated