"use client";

import * as React from "react";
import { createContext, 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<TickerContextValue>({
  formatter: defaultFormatter,
});

function useTickerContext() {
  return useContext(TickerContext);
}

function Ticker({
  children,
  className,
  currency = DEFAULT_CURRENCY,
  locale = DEFAULT_LOCALE,
  ...props
}: React.ComponentProps<"div"> & { currency?: string; locale?: string }) {
  const formatter = useMemo(() => {
    try {
      return new Intl.NumberFormat(locale, {
        style: "currency",
        currency: currency.toUpperCase(),
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    } catch {
      return defaultFormatter;
    }
  }, [currency, locale]);

  return (
    <TickerContext.Provider value={{ formatter }}>
      <div
        data-slot="ticker"
        className={cn("inline-flex items-center gap-1.5 whitespace-nowrap", className)}
        {...props}
      >
        {children}
      </div>
    </TickerContext.Provider>
  );
}

function TickerLogo({
  src,
  title,
  className,
  asChild,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  src?: string;
  title?: string;
  asChild?: boolean;
}) {
  if (asChild) {
    return (
      <div
        data-slot="ticker-logo"
        className={cn("size-6 overflow-hidden rounded-full", className)}
        {...props}
      >
        {children}
      </div>
    );
  }

  return (
    <Avatar data-slot="ticker-logo" className={cn("size-6", className)} {...props}>
      <AvatarImage src={src} />
      <AvatarFallback className="text-xs font-medium text-muted-foreground uppercase">
        {title?.slice(0, 2).toUpperCase()}
      </AvatarFallback>
    </Avatar>
  );
}

function TickerTitle({
  symbol,
  className,
  ...props
}: React.ComponentProps<"span"> & { symbol: string }) {
  return (
    <span
      data-slot="ticker-title"
      className={cn("text-lg font-medium", className)}
      {...props}
    >
      {symbol.toUpperCase()}
    </span>
  );
}

function TickerAmount({
  amount,
  className,
  ...props
}: React.ComponentProps<"span"> & { amount: number }) {
  const context = useTickerContext();

  const formattedAmount = useMemo(
    () => context.formatter.format(amount),
    [amount, context]
  );

  return (
    <span
      data-slot="ticker-amount"
      className={cn("text-lg text-muted-foreground tabular-nums", className)}
      {...props}
    >
      {formattedAmount}
    </span>
  );
}

function TickerAmountChange({
  change,
  isPercent,
  className,
  ...props
}: React.ComponentProps<"span"> & { change: number; isPercent?: boolean }) {
  const isPositiveChange = change >= 0;
  const context = useTickerContext();

  const changeFormatted = useMemo(() => {
    if (isPercent) {
      return `${change.toFixed(2)}%`;
    }
    return context.formatter.format(change);
  }, [change, isPercent, context]);

  return (
    <span
      data-slot="ticker-amount-change"
      data-change={isPositiveChange ? "positive" : "negative"}
      className={cn(
        "flex items-center gap-0.5 p-px [&_svg]:size-3",
        isPositiveChange ? "text-success" : "text-destructive",
        className
      )}
      {...props}
    >
      <svg
        aria-label={isPositiveChange ? "Up icon" : "Down icon"}
        aria-labelledby="ticker-change-icon-title"
        className={cn(!isPositiveChange && "rotate-180")}
        fill="currentColor"
        role="img"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M24 22h-24l12-20z" />
      </svg>

      <span data-slot="ticker-amount-change-value" className="text-lg tabular-nums">
        {changeFormatted}
      </span>
    </span>
  );
}

export { Ticker, TickerAmount, TickerAmountChange, TickerLogo, TickerTitle };
Ticker

More Components

Placeholder title

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

Join 3,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft
