Pairs card

src/app/markets/components/PairsCard.tsx

@@ -0,0 +1,43 @@
+import { SolanaLogo } from "@/components/logos";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Settings2Icon, ZapIcon } from "lucide-react";
+
+export default function PairsCard({ title }: { title: string }) {
+  return (
+    <Card className="py-3">
+      <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>
+    </Card>
+  );
+}

src/app/markets/page.tsx

@@ -2,11 +2,19 @@
 
 import Navbar from "@/components/layout/Navbar";
 import Statusbar from "@/components/layout/Statusbar";
+import PairsCard from "./components/PairsCard";
 
 export default function Markets() {
   return (
-    <main className="h-svh">
+    <main className="h-svh flex flex-col">
       <Navbar />
+      <section className="w-full h-full pt-10 pb-5 px-5">
+        <div className="w-full h-full grid grid-cols-3 gap-5">
+          <PairsCard title="New Pairs" />
+          <PairsCard title="Final Stretch" />
+          <PairsCard title="Migrated" />
+        </div>
+      </section>
       <Statusbar />
     </main>
   );

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}