Pool Card

1import type React from "react";
2import { SparklineChart } from "@/registry/sol/sparkline-chart";
3import { TokenIconGroup } from "@/registry/sol/token-icon-group";
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardFooter,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card";
12import { cn } from "@/lib/utils";
13 
14interface PoolCardMetric {
15  label: string;
16  value: string;
17  highlight?: boolean;
18  className?: string;
19}
20 
21interface PoolCardProps extends React.ComponentProps<typeof Card> {
22  tokens: { icon: string; symbol: string }[];
23  name?: string;
24  price?: string;
25  description?: string;
26  metrics?: PoolCardMetric[];
27  series?: { time: string; value: number }[];
28  children?: React.ReactNode;
29}
30 
31const PoolCard = ({
32  tokens,
33  name,
34  price,
35  description,
36  metrics,
37  series,
38  children,
39  className,
40  ...props
41}: PoolCardProps) => {
42  const displayName = name ?? tokens.map((t) => t.symbol).join("/");
43  const iconTokens = tokens.map((t) => ({ src: t.icon, alt: t.symbol }));
44  const iconSize = tokens.length > 1 ? 28 : 36;
45  const iconOverlap = tokens.length > 1 ? -10 : 0;
46 
47  const highlightMetric = metrics?.find((m) => m.highlight);
48  const regularMetrics = metrics?.filter((m) => !m.highlight);
49 
50  return (
51    <Card className={cn("p-4 w-full", className)} {...props}>
52      <CardHeader className="p-0">
53        <CardTitle className="flex items-center justify-between gap-2">
54          <div className="flex items-center gap-2 text-xl">
55            <TokenIconGroup
56              tokens={iconTokens}
57              size={iconSize}
58              overlap={iconOverlap}
59            />
60            {displayName}
61          </div>
62          {price && <span>{price}</span>}
63        </CardTitle>
64        {description && (
65          <CardDescription className="text-left">{description}</CardDescription>
66        )}
67      </CardHeader>
68 
69      {highlightMetric && (
70        <CardContent className="p-0">
71          <div className="flex flex-col">
72            <span className="text-muted-foreground text-xs">
73              {highlightMetric.label}
74            </span>
75            <span
76              className={cn(
77                "text-2xl font-bold tracking-tight",
78                highlightMetric.className,
79              )}
80            >
81              {highlightMetric.value}
82            </span>
83          </div>
84        </CardContent>
85      )}
86 
87      {regularMetrics && regularMetrics.length > 0 && (
88        <CardContent className="p-0">
89// … truncated