basic exchange layout

src/routes/exchange/[market]/index.css.ts

@@ -0,0 +1,33 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+const background = style({
+  backgroundColor: vars.color.background,
+});
+
+export const mainBuySell = style({
+  height: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr 300px",
+  gap: "1px",
+});
+
+export const buySell = style([background, {}]);
+
+export const mainPosition = style({
+  display: "grid",
+  gridTemplateRows: "1fr 350px",
+  gap: "1px",
+});
+
+export const position = style([background, {}]);
+
+export const chartOrderbook = style({
+  display: "grid",
+  gridTemplateColumns: "1fr 350px",
+  gap: "1px",
+});
+
+export const chart = style([background, {}]);
+
+export const orderbook = style([background, {}]);

src/routes/exchange/[market]/index.tsx

@@ -1,6 +1,15 @@
 import { component$ } from "@builder.io/qwik";
 import { type RequestHandler, routeLoader$ } from "@builder.io/qwik-city";
 import { parseMarket } from "./parseMarket";
+import {
+  buySell,
+  chart,
+  chartOrderbook,
+  mainBuySell,
+  mainPosition,
+  orderbook,
+  position,
+} from "./index.css";
 
 export const onRequest: RequestHandler = ({ params, redirect, sharedMap }) => {
   try {
@@ -24,5 +33,16 @@ export default component$(() => {
   console.log(quoteAsset);
   console.log(baseAsset);
 
-  return <></>;
+  return (
+    <div class={mainBuySell}>
+      <div class={mainPosition}>
+        <div class={chartOrderbook}>
+          <div class={chart}></div>
+          <div class={orderbook}></div>
+        </div>
+        <div class={position}></div>
+      </div>
+      <div class={buySell}></div>
+    </div>
+  );
 });

src/routes/exchange/index.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+const background = style({
+  backgroundColor: vars.color.background,
+});
+
+export const index = style([
+  background,
+  {
+    height: "100%",
+  },
+]);

src/routes/exchange/index.tsx

@@ -1,8 +1,9 @@
 import { component$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
+import { index } from "./index.css";
 
 export default component$(() => {
-  return <></>;
+  return <div class={index}></div>;
 });
 
 export const head: DocumentHead = {

src/routes/main.css.ts

@@ -19,7 +19,7 @@ const desktop: ComplexStyleRule = {
 export const main = style([
   mobile,
   {
-    backgroundColor: vars.color.background,
+    backgroundColor: vars.color.backgroundHighlight,
     "@media": {
       [mediaQuery.desktop]: desktop,
     },