Improved idk

src/app/markets/components/PairsCard.tsx

@@ -3,8 +3,15 @@ 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 }: { title: string }) {
+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">
@@ -39,21 +46,12 @@ export default function PairsCard({ title }: { title: string }) {
           </Button>
         </div>
       </CardHeader>
-      <CardContent className="px-4 py-4 border-b border-border hover:bg-muted">
+      <CardContent className="p-0">
-        <TokenCard
+        {tokens.map((token) => (
-          token={{
+          <div key={token.mint} className="px-4 py-4 border-b border-border hover:bg-muted">
-            symbol: "SYM",
+            <TokenCard token={token} />
-            name: "My token",
+          </div>
-            mint: "myMint",
+        ))}
-            twitterPost: {
-              link: "https://x.com/selimajdev/status/2013291898836758968",
-              author: {
-                username: "selimajdev",
-                followers: 1250000,
-              },
-            },
-          }}
-        />
       </CardContent>
     </Card>
   );

src/app/markets/components/TokenCard.tsx

@@ -12,7 +12,6 @@ import {
   CrosshairIcon,
   EyeIcon,
   GhostIcon,
-  IconNode,
   LucideIcon,
   UserIcon,
   UsersIcon,

src/app/markets/page.tsx

@@ -10,9 +10,57 @@ export default function Markets() {
       <Navbar />
       <section className="w-full h-full pt-10 pb-5 px-5">
         <div className="w-full h-full grid grid-cols-1 md:grid-cols-3 gap-5">
-          <PairsCard title="New Pairs" />
+          <PairsCard
-          <PairsCard title="Final Stretch" />
+            title="New Pairs"
-          <PairsCard title="Migrated" />
+            tokens={[
+              {
+                symbol: "SYM",
+                name: "My token",
+                mint: "myMint",
+                twitterPost: {
+                  link: "https://x.com/selimajdev/status/2013291898836758968",
+                  author: {
+                    username: "selimajdev",
+                    followers: 1250000,
+                  },
+                },
+              },
+            ]}
+          />
+          <PairsCard
+            title="Final Stretch"
+            tokens={[
+              {
+                symbol: "TEST",
+                name: "A test token",
+                mint: "myMint2",
+                twitterPost: {
+                  link: "https://x.com/selimajdev/status/2013291898836758968",
+                  author: {
+                    username: "selimajdev",
+                    followers: 1250000,
+                  },
+                },
+              },
+            ]}
+          />
+          <PairsCard
+            title="Migrated"
+            tokens={[
+              {
+                symbol: "MIG",
+                name: "Are we migrated yet?",
+                mint: "migratedMint",
+                twitterPost: {
+                  link: "https://x.com/selimajdev/status/2013291898836758968",
+                  author: {
+                    username: "selimajdev",
+                    followers: 1250000,
+                  },
+                },
+              },
+            ]}
+          />
         </div>
       </section>
       <Statusbar />