From 056fe8de5c5c5e4845f0d35672ad332e20933d89 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Wed, 18 Feb 2026 00:50:06 +0100 Subject: [PATCH] Market UI (simple layout) --- package-lock.json | 11 +++ package.json | 1 + src/app/globals.css | 9 ++ src/app/market/components/MarketSidebar.tsx | 25 ++++++ src/app/market/page.tsx | 18 ++++ src/components/ui/input.tsx | 21 +++++ src/components/ui/resizable.tsx | 53 ++++++++++++ src/components/ui/separator.tsx | 28 +++++++ src/components/ui/tabs.tsx | 91 +++++++++++++++++++++ 9 files changed, 257 insertions(+) create mode 100644 src/app/market/components/MarketSidebar.tsx create mode 100644 src/app/market/page.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/resizable.tsx create mode 100644 src/components/ui/separator.tsx create mode 100644 src/components/ui/tabs.tsx diff --git a/package-lock.json b/package-lock.json index 59921e1..2d2fd81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "radix-ui": "^1.4.3", "react": "19.2.3", "react-dom": "19.2.3", + "react-resizable-panels": "^4.6.4", "tailwind-animations": "^1.0.1", "tailwind-merge": "^3.4.0", "tailwind-motlib": "^1.0.4" @@ -6753,6 +6754,16 @@ } } }, + "node_modules/react-resizable-panels": { + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.6.4.tgz", + "integrity": "sha512-E7Szs1xyaMZ7xOI2gG4TECNz4r/gmpV1AsXyZRnER6OQnfFf9uclFmrHHZR3h/iF8vQS+nQ1LKyZv9bzwGxPSg==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", diff --git a/package.json b/package.json index 8b3d99b..4f8f3f2 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "radix-ui": "^1.4.3", "react": "19.2.3", "react-dom": "19.2.3", + "react-resizable-panels": "^4.6.4", "tailwind-animations": "^1.0.1", "tailwind-merge": "^3.4.0", "tailwind-motlib": "^1.0.4" diff --git a/src/app/globals.css b/src/app/globals.css index 5b22053..7d4df37 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -48,6 +48,9 @@ --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); + + --color-bullish: var(--bullish); + --color-bearish: var(--bearish); } :root { @@ -106,6 +109,12 @@ --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.6 0.12 285); + + /* Bullish - vibrant SOL mint */ + --bullish: oklch(0.72 0.18 165); + + /* Bearish - destructive/coral red */ + --bearish: oklch(0.62 0.2 30); } @layer base { diff --git a/src/app/market/components/MarketSidebar.tsx b/src/app/market/components/MarketSidebar.tsx new file mode 100644 index 0000000..2e85c90 --- /dev/null +++ b/src/app/market/components/MarketSidebar.tsx @@ -0,0 +1,25 @@ +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; + +export default function MarketSidebar() { + return ( +
+
+ + + + Buy + + + Sell + + + +
+ ); +} diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx new file mode 100644 index 0000000..5ac5202 --- /dev/null +++ b/src/app/market/page.tsx @@ -0,0 +1,18 @@ +"use client"; + +import Navbar from "@/components/layout/Navbar"; +import Statusbar from "@/components/layout/Statusbar"; +import MarketSidebar from "./components/MarketSidebar"; + +export default function Market() { + return ( +
+ +
+
+ +
+ {/* */} +
+ ); +} diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..8916905 --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Input({ className, type, ...props }: React.ComponentProps<"input">) { + return ( + + ) +} + +export { Input } diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx new file mode 100644 index 0000000..bbd25cc --- /dev/null +++ b/src/components/ui/resizable.tsx @@ -0,0 +1,53 @@ +"use client" + +import { GripVerticalIcon } from "lucide-react" +import * as ResizablePrimitive from "react-resizable-panels" + +import { cn } from "@/lib/utils" + +function ResizablePanelGroup({ + className, + ...props +}: ResizablePrimitive.GroupProps) { + return ( + + ) +} + +function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) { + return +} + +function ResizableHandle({ + withHandle, + className, + ...props +}: ResizablePrimitive.SeparatorProps & { + withHandle?: boolean +}) { + return ( + div]:rotate-90", + className + )} + {...props} + > + {withHandle && ( +
+ +
+ )} + + ) +} + +export { ResizableHandle, ResizablePanel, ResizablePanelGroup } diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx new file mode 100644 index 0000000..4c24b2a --- /dev/null +++ b/src/components/ui/separator.tsx @@ -0,0 +1,28 @@ +"use client" + +import * as React from "react" +import { Separator as SeparatorPrimitive } from "radix-ui" + +import { cn } from "@/lib/utils" + +function Separator({ + className, + orientation = "horizontal", + decorative = true, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Separator } diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..7f73dcd --- /dev/null +++ b/src/components/ui/tabs.tsx @@ -0,0 +1,91 @@ +"use client" + +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" +import { Tabs as TabsPrimitive } from "radix-ui" + +import { cn } from "@/lib/utils" + +function Tabs({ + className, + orientation = "horizontal", + ...props +}: React.ComponentProps) { + return ( + + ) +} + +const tabsListVariants = cva( + "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", + { + variants: { + variant: { + default: "bg-muted", + line: "gap-1 bg-transparent", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function TabsList({ + className, + variant = "default", + ...props +}: React.ComponentProps & + VariantProps) { + return ( + + ) +} + +function TabsTrigger({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function TabsContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }