Crypto Price Chart

1"use client";
2import { BitcoinPiggyBankIcon, Mining03Icon } from "@hugeicons/core-free-icons";
3import { HugeiconsIcon } from "@hugeicons/react";
4import { useState } from "react";
5import { motion } from "motion/react";
6import { cn } from "@/lib/utils";
7import {
8  Area,
9  AreaChart,
10  ResponsiveContainer,
11  Tooltip,
12  TooltipContentProps,
13  YAxis,
14} from "recharts";
15import { useId } from "react";
16
17type TabKey = "1H" | "1D" | "1W" | "1M" | "1Y" | "ALL";
18const Tabs: TabKey[] = ["1H", "1D", "1W", "1M", "1Y", "ALL"];
19
20const getRangeLabels = (range: TabKey) => {
21  switch (range) {
22    case "1H":
23      return { low: "Hour Low", high: "Hour High" };
24    case "1D":
25      return { low: "Today's Low", high: "Today's High" };
26    case "1W":
27      return { low: "Week Low", high: "Week High" };
28    case "1M":
29      return { low: "Month Low", high: "Month High" };
30    case "1Y":
31      return { low: "Year Low", high: "Year High" };
32    case "ALL":
33      return { low: "All-T Low", high: "All-T High" };
34    default:
35      return { low: "Low", high: "High" };
36  }
37};
38
39const formatCurrency = (value: number) =>
40  new Intl.NumberFormat("en-US", {
41    style: "currency",
42    currency: "USD",
43    maximumFractionDigits: 0,
44  }).format(value);
45
46export interface CryptoPriceChartProps {
47  title: string;
48  quantityOwned: number;
49  chartData: Record<TabKey, { time: string; price: number }[]>;
50}
51
52export const CryptoPriceChart = ({
53  title,
54  quantityOwned,
55  chartData,
56}: CryptoPriceChartProps) => {
57  const [hoverPrice, setHoverPrice] = useState<number | null>(null);
58  const [active, setActive] = useState<TabKey>("1D");
59  const data = chartData[active];
60  const low = Math.min(...data.map((d) => d.price));
61  const high = Math.max(...data.map((d) => d.price));
62  const currentPrice = data[data.length - 1].price;
63  const firstPrice = data[0].price;
64  const lastPrice = data[data.length - 1].price;
65  const displayPrice = hoverPrice ?? lastPrice;
66  const { low: lowLabel, high: highLabel } = getRangeLabels(active);
67  const percentageChange = ((lastPrice - firstPrice) / firstPrice) * 100;
68  const layoutScope = useId();
69
70  return (
71    <div className="w-80 h-80 bg-neutral-900 dark:bg-neutral-950 rounded-3xl border-3 border-double border-neutral-500 dark:border-neutral-800 p-4 text-neutral-100">
72      <div className="flex flex-col gap-2 h-full">
73        <ChartHeader
74          quantityOwned={quantityOwned}
75// … truncated