Position Card

A card component for displaying an active lending or staking position with token info and APY

SOL6.82% APY

45.25 SOL$7,355.82

import { PositionCard } from "@/components/sol/position-card";
import { Button } from "@/components/ui/button";

const SOL_ICON =
  "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png";

export function PositionCardDemo() {
  return (
    <PositionCard
      symbol="SOL"
      icon={SOL_ICON}
      amount="45.25 SOL"
      value="$7,355.82"
      apy="6.82%"
    >
      <div className="grid grid-cols-2 gap-2 w-full">
        <Button variant="secondary" size="sm">Withdraw</Button>
        <Button variant="secondary" size="sm">Supply More</Button>
      </div>
    </PositionCard>
  );
}

Installation

pnpm dlx shadcn@latest add @solanaui/position-card

npx shadcn@latest add @solanaui/position-card

yarn dlx shadcn@latest add @solanaui/position-card

Usage

const SOL_ICON =
  "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png";

<PositionCard
  symbol="SOL"
  icon={SOL_ICON}
  amount="45.25 SOL"
  value="$7,355.82"
/>

Source Code

import type React from "react";
import { TokenIcon } from "@/registry/sol/token-icon";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface PositionCardProps extends React.ComponentProps<typeof Card> {
  symbol: string;
  icon: string;
  amount: string;
  value: string;
  apy?: string;
  trend?: "up" | "down";
  children?: React.ReactNode;
}

const PositionCard = ({
  symbol,
  icon,
  amount,
  value,
  apy,
  trend = "up",
  children,
  className,
  ...props
}: PositionCardProps) => {
  return (
    <Card className={cn("p-4 w-full gap-3", className)} {...props}>
      <CardContent className="flex items-center justify-between p-0 pb-2">
        <div className="flex items-center gap-3">
          <TokenIcon src={icon} alt={symbol} width={48} height={48} />
          <div className="flex flex-col">
            <span className="text-xl font-medium">{symbol}</span>
            {apy && (
              <span
                className={cn(
                  "text-xs font-medium",
                  trend === "up" ? "text-emerald-500" : "text-red-400",
                )}
              >
                {apy} APY
              </span>
            )}
          </div>
        </div>
        <div className="flex flex-col items-end">
          <span className="text-2xl font-medium">{amount}</span>
          <span className="text-sm text-muted-foreground">{value}</span>
        </div>
      </CardContent>

      {children && <CardFooter className="p-0">{children}</CardFooter>}
    </Card>
  );
};

export type { PositionCardProps };
export { PositionCard };

import type React from "react";import { TokenIcon } from "@/registry/sol/token-icon";import { Card, CardContent, CardFooter } from "@/components/ui/card";import { cn } from "@/lib/utils";interface PositionCardProps extends React.ComponentProps<typeof Card> {  symbol: string;  icon: string;  amount: string;  value: string;  apy?: string;  trend?: "up" | "down";  children?: React.ReactNode;}const PositionCard = ({  symbol,  icon,  amount,  value,  apy,  trend = "up",  children,  className,  ...props}: PositionCardProps) => {  return (    <Card className={cn("p-4 w-full gap-3", className)} {...props}>      <CardContent className="flex items-center justify-between p-0 pb-2">        <div className="flex items-center gap-3">          <TokenIcon src={icon} alt={symbol} width={48} height={48} />          <div className="flex flex-col">            <span className="text-xl font-medium">{symbol}</span>            {apy && (              <span                className={cn(                  "text-xs font-medium",                  trend === "up" ? "text-emerald-500" : "text-red-400",                )}              >                {apy} APY              </span>            )}          </div>        </div>        <div className="flex flex-col items-end">          <span className="text-2xl font-medium">{amount}</span>          <span className="text-sm text-muted-foreground">{value}</span>        </div>      </CardContent>      {children && <CardFooter className="p-0">{children}</CardFooter>}    </Card>  );};export type { PositionCardProps };export { PositionCard };

Installation

Usage

Source Code

On this page