Add the order book panel component.

src/app/TradeApp/pages/Trading.stories.tsx

@@ -1,7 +1,7 @@
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Meta } from '@storybook/react/types-6-0'
 
-import { Trading } from './Trading'
+import Trading from './Trading'
 
 export default {
   title: 'TradeApp/Trading',

src/app/TradeApp/pages/Trading.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import OrderForm from 'components/OrderForm'
+// Components
+import { OrderForm } from 'components/OrderForm'
+import { OrderBookPanel } from 'components/OrderBookPanel'
 
 const Wrapper = styled.div`
   display: flex;
@@ -13,9 +15,10 @@ const Wrapper = styled.div`
   top: var(--height-bar-default);
 `
 
-export const Trading: React.FC = () => (
+const Trading: React.FC = () => (
   <Wrapper>
     <OrderForm />
+    <OrderBookPanel />
   </Wrapper>
 )
 

src/components/OrderBookPanel/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import styled from 'styled-components'
+
+// export interface TabItemType {
+//   readonly id: number
+//   title: string
+//   content: string
+//   readonly activeColor?: string
+// }
+
+// const tabItems: TabItemType[] = [
+//   {
+//     id: 1,
+//     title: 'BUY',
+//     content: '- buy component -',
+//     activeColor: '--color-buy',
+//   },
+//   {
+//     id: 2,
+//     title: 'SELL',
+//     content: '- sell component -',
+//     activeColor: '--color-sell',
+//   },
+// ]
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: var(--padding-container-default);
+  background: none;
+  width: 31rem;
+  flex-flow: column wrap;
+  position: relative;
+  height: 100%;
+  border-right: 0.1rem solid var(--color-border);
+`
+
+export const OrderBookPanel: React.FC = () => (
+  <Wrapper>
+    <p>Order Book Panel</p>
+    {/* <Tabs tabItems={tabItems} /> */}
+  </Wrapper>
+)

src/components/OrderForm/index.tsx

@@ -14,11 +14,9 @@ const Wrapper = styled.div`
   border-right: 0.1rem solid var(--color-border);
 `
 
-const OrderForm: React.FC = () => (
+export const OrderForm: React.FC = () => (
   <Wrapper>
     <TokenPairSelector selectedPair="ETH/USDC" selectLabel="Select Pair" />
     <OrderBuySell />
   </Wrapper>
 )
-
-export default OrderForm