59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { SolanaLogo } from "@/components/logos";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Settings2Icon, ZapIcon } from "lucide-react";
|
|
import TokenCard from "./TokenCard";
|
|
import { Token } from "@/modules/tokens/types";
|
|
|
|
export default function PairsCard({
|
|
title,
|
|
tokens,
|
|
}: {
|
|
title: string;
|
|
tokens: Token[];
|
|
}) {
|
|
return (
|
|
<Card className="py-3 gap-0!">
|
|
<CardHeader className="px-4 pb-3! border-b flex justify-between items-center">
|
|
<CardTitle>{title}</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
<div className="border border-border animate-colors hover:bg-input/20 px-1.5 py-1.5 rounded-full flex items-center gap-1">
|
|
<div className="flex items-center">
|
|
<ZapIcon className="w-3 h-3" />
|
|
<input
|
|
type="text"
|
|
placeholder="0.0"
|
|
className="px-1 w-10 focus:outline-0 text-xs"
|
|
/>
|
|
<SolanaLogo className="w-3 h-3" />
|
|
</div>
|
|
<div className="border-l border-border pl-1 flex items-center text-xs gap-1.5">
|
|
{["P1", "P2", "P3"].map((p) => (
|
|
<div
|
|
key={p}
|
|
className="text-foreground/90 cursor-pointer hover:text-primary"
|
|
>
|
|
{p}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
className="p-1! h-max hover:bg-accent/20 hover:text-accent"
|
|
>
|
|
<Settings2Icon />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{tokens.map((token) => (
|
|
<div key={token.mint} className="px-4 py-4 border-b border-border hover:bg-muted">
|
|
<TokenCard token={token} />
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|