Action Box

1import { TokenInput } from "@/registry/sol/token-input";
2import { Button } from "@/components/ui/button";
3import { Separator } from "@/components/ui/separator";
4import type { DetailRow } from "@/registry/lib/types";
5import { cn } from "@/lib/utils";
6 
7type ActionBoxDetail = DetailRow;
8 
9interface ActionBoxProps {
10  tokens: { icon: string; symbol: string }[];
11  defaultToken?: string;
12  balance?: string;
13  label?: string;
14  details?: ActionBoxDetail[];
15  submitLabel?: string;
16  onSubmit?: () => void;
17  className?: string;
18}
19 
20const ActionBox = ({
21  tokens,
22  defaultToken,
23  balance,
24  label,
25  details,
26  submitLabel = "Submit",
27  onSubmit,
28  className,
29}: ActionBoxProps) => {
30  return (
31    <div className={cn("flex flex-col gap-4 border rounded-lg p-4", className)}>
32      {label && (
33        <span className="text-sm font-medium text-muted-foreground">
34          {label}
35        </span>
36      )}
37      <TokenInput
38        tokens={tokens}
39        defaultToken={defaultToken}
40        balance={balance}
41      />
42      {details && details.length > 0 && (
43        <>
44          <Separator />
45          <div className="flex flex-col gap-1.5 text-sm">
46            {details.map((detail) => (
47              <div key={detail.label} className="flex justify-between">
48                <span className="text-muted-foreground">{detail.label}</span>
49                <span className={detail.className}>{detail.value}</span>
50              </div>
51            ))}
52          </div>
53        </>
54      )}
55      <Button className="w-full" size="lg" onClick={onSubmit}>
56        {submitLabel}
57      </Button>
58    </div>
59  );
60};
61 
62export type { ActionBoxProps, ActionBoxDetail };
63export { ActionBox };