Simple token card

src/app/markets/components/PairsCard.tsx

@@ -1,11 +1,12 @@
 import { SolanaLogo } from "@/components/logos";
 import { Button } from "@/components/ui/button";
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Settings2Icon, ZapIcon } from "lucide-react";
+import TokenCard from "./TokenCard";
 
 export default function PairsCard({ title }: { title: string }) {
   return (
-    <Card className="py-3">
+    <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">
@@ -38,6 +39,11 @@ export default function PairsCard({ title }: { title: string }) {
           </Button>
         </div>
       </CardHeader>
+      <CardContent className="px-4 py-4 border-b border-border ">
+        <TokenCard
+          token={{ symbol: "SYM", name: "My token", mint: "myMint" }}
+        />
+      </CardContent>
     </Card>
   );
 }

src/app/markets/components/TokenCard.tsx

@@ -0,0 +1,23 @@
+import { Token } from "@/modules/tokens/types";
+import { CopyIcon } from "lucide-react";
+
+export default function TokenCard({ token }: { token: Token }) {
+  return (
+    <div className="flex gap-4">
+      <div className="h-full overflow-hidden min-w-0">
+        <img
+          src={token.logoURI}
+          alt="Token"
+          className="w-16 h-16 bg-amber-50 rounded-lg"
+        />
+        <p className="mt-1 truncate text-xs text-muted-foreground"></p>
+      </div>
+      <div className="flex gap-1.5">
+        <p className="font-semibold">{token.symbol}</p>
+        <p className="text-muted-foreground flex gap-1 items-center h-max cursor-pointer hover:text-accent">
+          {token.name} <CopyIcon className="w-4 h-4" />
+        </p>
+      </div>
+    </div>
+  );
+}

src/modules/tokens/types.ts

@@ -0,0 +1,6 @@
+export interface Token {
+  mint: string;
+  symbol: string;
+  name: string;
+  logoURI?: string;
+}