Adding a generic Tabs component.

src/components/OrderBuySell/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import Tabs from 'components/common/Tabs/Tabs'
+
+export interface TabItemType {
+  readonly id: number
+  title: string
+  content: string
+  readonly activeColor?: string
+}
+
+// pass string props to indicate what content/component to show
+
+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;
+  width: 100%;
+  padding: var(--padding-container-default);
+`
+
+export const OrderBuySell: React.FC = () => (
+  <Wrapper>
+    <Tabs tabItems={tabItems} />
+  </Wrapper>
+)
+
+export default OrderBuySell

src/components/OrderForm/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { TokenPairSelector } from 'components/TokenPairSelector'
+import { OrderBuySell } from 'components/OrderBuySell'
 
 const Wrapper = styled.div`
   display: flex;
@@ -16,6 +17,7 @@ const Wrapper = styled.div`
 export const OrderForm: React.FC = () => (
   <Wrapper>
     <TokenPairSelector selectedPair="ETH/USDC" selectLabel="Select Pair" />
+    <OrderBuySell />
   </Wrapper>
 )
 

src/components/common/Tabs/TabContent.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { TabItemType } from 'components/OrderBuySell'
+
+type Props = {
+  tabItems: TabItemType[]
+  activeTab: number
+}
+
+const TabContent: React.FC<Props> = (props) => {
+  const { tabItems, activeTab } = props
+  return (
+    <div>
+      {tabItems.map((tab) => {
+        return tab.id === activeTab ? tab.content : ''
+      })}
+    </div>
+  )
+}
+
+export default TabContent

src/components/common/Tabs/TabItem.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import styled from 'styled-components'
+
+interface TabProps {
+  title: string
+  readonly id: number
+  readonly isActive: boolean
+  readonly activeColor?: string
+  onTabClick: (arg: number) => void
+}
+
+interface WrapperProps {
+  readonly activeColor?: string
+}
+
+const Wrapper = styled.li<WrapperProps>`
+  background: var(--color-primary);
+  color: var(--color-text-secondary2);
+  height: var(--height-button-default);
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-large);
+  letter-spacing: 0.1rem;
+  text-align: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:first-of-type {
+    border-top-left-radius: var(--border-radius-default);
+    border-bottom-left-radius: var(--border-radius-default);
+  }
+
+  &:last-of-type {
+    border-top-right-radius: var(--border-radius-default);
+    border-bottom-right-radius: var(--border-radius-default);
+  }
+
+  &.isActive {
+    background: ${(props): string => (props.activeColor ? `var(${props.activeColor})` : 'var(--color-primary)')};
+    color: var(--color-text-primary);
+  }
+`
+
+const TabItem: React.FC<TabProps> = (props) => {
+  const { onTabClick, id, title, isActive, activeColor } = props
+
+  return (
+    <Wrapper activeColor={activeColor} className={isActive ? 'isActive' : ''} onClick={(): void => onTabClick(id)}>
+      {title}
+    </Wrapper>
+  )
+}
+
+export default TabItem

src/components/common/Tabs/Tabs.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+// Components
+import { TabItemType } from 'components/OrderBuySell'
+import TabItem from 'components/common/Tabs/TabItem'
+import TabContent from 'components/common/Tabs/TabContent'
+
+interface Props {
+  tabItems: TabItemType[]
+}
+
+const Tabs: React.FC<Props> = (props) => {
+  const [activeTab, setActiveTab] = useState<number>(1)
+
+  const onTabClick = (id: number): void => {
+    return setActiveTab(id)
+  }
+
+  const Wrapper = styled.div`
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+
+    > ul {
+      list-style: none;
+      display: flex;
+      flex-flow: row nowrap;
+      padding: 0;
+      justify-content: space-between;
+      width: 100%;
+    }
+  `
+
+  return (
+    <Wrapper>
+      <ul>
+        {props.tabItems.map(({ id, title, activeColor }) => (
+          <TabItem
+            key={id}
+            id={id}
+            title={title}
+            onTabClick={(): void => onTabClick(id)}
+            isActive={activeTab === id}
+            activeColor={activeColor}
+          />
+        ))}
+      </ul>
+      <TabContent tabItems={props.tabItems} activeTab={activeTab} />
+    </Wrapper>
+  )
+}
+
+export default Tabs

src/components/layout/GenericLayout/variablesCss.ts

@@ -3,19 +3,32 @@ import { css } from 'styled-components'
 const AllColors = `
   /* HEIGHTS */
   --height-bar-default: 6.2rem;
+  --height-button-default: 3.4rem;
   /* ------------------------------ */
 
+  /* MISC */
+  --border-radius-default: .3rem;
+  --padding-container-default: 1.2rem;
+
   /* FONTS */
   --font-default: "Inter", "Helvetica Neue", Helvetica, sans-serif;
   --font-arial: Arial, Helvetica, sans-serif;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-bold: 700;
+  --font-size-default: 1.2rem;
+  --font-size-large: 1.4rem;
   /* ------------------------------ */
 `
 
 const DarkColors = `
   --color-primary: #1E1F2B;
+  --color-buy: var(--color-green);
+  --color-sell: var(--color-red);
+
+  /* Palette specific */
+  --color-green: #00C46E;
+  --color-red: #FF305B;
 
   /* Gradients */
   --color-gradient-1: #21222E;