Responsive trade layout (#69)

* Setup responsive trade layout * Adjust column widths * Remove unused Text componet
penumbra-zone · Sep 27, 2024 · 7374675 · 7374675
1 parent eff9854
commit 7374675
Showing 1 changed file with 37 additions and 4 deletions.
diff --git a/src/app/v2/trade/page.tsx b/src/app/v2/trade/page.tsx
@@ -1,12 +1,45 @@
 'use client';
 
-import { Text } from '@penumbra-zone/ui/Text';
+import { Card } from '@penumbra-zone/ui/Card';
 
 const TradePage = () => {
   return (
-    <section>
-      <Text h2>Hi!</Text>
-    </section>
+    <div>
+      <div className='flex flex-wrap lg:gap-2'>
+        <div className='w-full lg:w-auto lg:flex-grow mb-2'>
+          <Card title='Chart'>
+            <div className='h-[512px]'>-</div>
+          </Card>
+        </div>
+        <div className='w-full sm:w-1/2 sm:pr-1 lg:w-[336px] lg:pr-0 mb-2'>
+          <Card title='Route Book'>
+            <div className='h-[512px]'>-</div>
+          </Card>
+        </div>
+        <div className='w-full sm:w-1/2 sm:pl-1 lg:w-[304px] lg:pl-0 mb-2'>
+          <Card title='Order Form'>
+            <div className='h-[512px]'>-</div>
+          </Card>
+        </div>
+      </div>
+      <div className='flex flex-wrap lg:gap-2'>
+        <div className='w-full lg:w-auto lg:flex-grow mb-2'>
+          <Card title='Positions'>
+            <div className='h-[256px]'>-</div>
+          </Card>
+        </div>
+        <div className='w-full sm:w-1/2 sm:pr-1 lg:w-[336px] lg:pr-0 mb-2'>
+          <Card title='Market Trades'>
+            <div className='h-[256px]'>-</div>
+          </Card>
+        </div>
+        <div className='w-full sm:w-1/2 sm:pl-1 lg:w-[304px] lg:pl-0 mb-2'>
+          <Card title='Assets'>
+            <div className='h-[256px]'>-</div>
+          </Card>
+        </div>
+      </div>
+    </div>
   );
 };