Apocalypse Token List

1"use client";
2 
3import * as React from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { cn } from "@/registry/apocalypseui/lib/utils";
6import { TokenListItem } from "./token-list-item";
7import type { TokenData } from "./types";
8 
9const tokenListVariants = cva(
10  "w-full bg-neutral-100 dark:bg-neutral-800 rounded-2xl shadow-[0px_4px_16px_0px_rgba(0,0,0,0.25)] backdrop-blur-md flex flex-col overflow-hidden",
11  {
12    variants: {
13      size: {
14        sm: "text-sm",
15        md: "text-base",
16        lg: "text-lg",
17      },
18    },
19    defaultVariants: {
20      size: "md",
21    },
22  }
23);
24 
25 
26export interface TokenListProps
27  extends React.HTMLAttributes<HTMLDivElement>,
28    VariantProps<typeof tokenListVariants> {
29  tokens: TokenData[];
30  showHeader?: boolean;
31  headerLabels?: {
32    rank?: string;
33    token?: string;
34    price?: string;
35  };
36}
37 
38const TokenList = React.forwardRef<HTMLDivElement, TokenListProps>(
39  (
40    {
41      className,
42      size,
43      tokens,
44      showHeader = true,
45      headerLabels = {
46        rank: "#",
47        token: "Token",
48        price: "Price",
49      },
50      ...props
51    },
52    ref
53  ) => {
54    return (
55      <div ref={ref} className={cn(tokenListVariants({ size }), className)} {...props}>
56        {showHeader && (
57          <div className="self-stretch p-2 sm:p-4 rounded-lg flex justify-center items-center gap-1.5 sm:gap-3 overflow-hidden border-b border-neutral-200 dark:border-neutral-700">
58            <div className="w-6 sm:w-8 flex justify-start text-neutral-500 dark:text-neutral-400 text-xs sm:text-sm font-medium font-mono leading-4 flex-shrink-0">
59              {headerLabels.rank}
60            </div>
61            <div className="w-10 sm:w-14 flex-shrink-0" />
62            <div className="flex-1 justify-start text-neutral-500 dark:text-neutral-400 text-xs sm:text-sm font-medium font-mono leading-4">
63              {headerLabels.token}
64            </div>
65            <div className="flex-shrink-0 min-w-[80px] sm:min-w-[120px] text-right justify-start text-neutral-500 dark:text-neutral-400 text-xs sm:text-sm font-medium font-mono leading-4">
66              {headerLabels.price}
67            </div>
68          </div>
69        )}
70        <div className="flex flex-col">
71          {tokens.map((token, index) => (
72            <TokenListItem
73              key={token.rank || index}
74              token={token}
75              size={size ?? "md"}
76            />
77          ))}
78        </div>
79      </div>
80    );
81  }
82);
83 
84// … truncated