Position Card

1import type React from "react";
2import { TokenIcon } from "@/registry/sol/token-icon";
3import { Card, CardContent, CardFooter } from "@/components/ui/card";
4import { cn } from "@/lib/utils";
5 
6interface PositionCardProps extends React.ComponentProps<typeof Card> {
7  symbol: string;
8  icon: string;
9  amount: string;
10  value: string;
11  apy?: string;
12  trend?: "up" | "down";
13  children?: React.ReactNode;
14}
15 
16const PositionCard = ({
17  symbol,
18  icon,
19  amount,
20  value,
21  apy,
22  trend = "up",
23  children,
24  className,
25  ...props
26}: PositionCardProps) => {
27  return (
28    <Card className={cn("p-4 w-full gap-3", className)} {...props}>
29      <CardContent className="flex items-center justify-between p-0 pb-2">
30        <div className="flex items-center gap-3">
31          <TokenIcon src={icon} alt={symbol} width={48} height={48} />
32          <div className="flex flex-col">
33            <span className="text-xl font-medium">{symbol}</span>
34            {apy && (
35              <span
36                className={cn(
37                  "text-xs font-medium",
38                  trend === "up" ? "text-emerald-500" : "text-red-400",
39                )}
40              >
41                {apy} APY
42              </span>
43            )}
44          </div>
45        </div>
46        <div className="flex flex-col items-end">
47          <span className="text-2xl font-medium">{amount}</span>
48          <span className="text-sm text-muted-foreground">{value}</span>
49        </div>
50      </CardContent>
51 
52      {children && <CardFooter className="p-0">{children}</CardFooter>}
53    </Card>
54  );
55};
56 
57export type { PositionCardProps };
58export { PositionCard };