diff --git a/apps/trading/pages/markets/[marketId].page.tsx b/apps/trading/pages/markets/[marketId].page.tsx index e0a4c9e0f..03d8f5bac 100644 --- a/apps/trading/pages/markets/[marketId].page.tsx +++ b/apps/trading/pages/markets/[marketId].page.tsx @@ -2,7 +2,7 @@ import { gql, useQuery } from '@apollo/client'; import AutoSizer from 'react-virtualized-auto-sizer'; import classNames from 'classnames'; import { useRouter } from 'next/router'; -import { ReactNode } from 'react'; +import React, { Children, isValidElement, ReactNode, useState } from 'react'; import { Market, MarketVariables } from './__generated__/Market'; // Top level page query @@ -40,18 +40,26 @@ const MarketPage = () => { {error ? (
Something went wrong: {error.message}
) : ( -
+

Market: {query.marketId}

- Content - Content - Content - -
{JSON.stringify(data, null, 2)}
+ TODO: Chart + TODO: Ticket + + + +
{JSON.stringify(data, null, 2)}
+
+ Orderbook TODO: +
- - Content + + + TODO: Orders + TODO: Positions + TODO: Collateral +
)} @@ -63,28 +71,68 @@ export default MarketPage; interface GridChildProps { children: ReactNode; - name?: string; className?: string; } -const GridChild = ({ children, className, name }: GridChildProps) => { +const GridChild = ({ children, className }: GridChildProps) => { const gridChildClasses = classNames('bg-white', className); return (
-
-
-

{name}

-
-
- - {({ width, height }) => ( -
- {children} -
- )} -
-
-
+ + {({ width, height }) => ( +
+ {children} +
+ )} +
); }; + +interface GridTabsProps { + children: ReactNode; +} + +const GridTabs = ({ children }: GridTabsProps) => { + const [activeTab, setActiveTab] = useState(children[0].props.name); + + return ( +
+ {/* the tabs */} +
+ {Children.map(children, (child) => { + if (!isValidElement(child)) return null; + const buttonClass = classNames('p-8', { + 'text-vega-pink': child.props.name === activeTab, + }); + return ( + + ); + })} +
+ {/* the content */} +
+ {Children.map(children, (child) => { + if (isValidElement(child) && child.props.name === activeTab) { + return
{child.props.children}
; + } + return null; + })} +
+
+ ); +}; + +interface GridTabProps { + children: ReactNode; + name: string; +} + +const GridTab = ({ children }: GridTabProps) => { + return
{children}
; +};