oka-design-system

Using OKA Design system you need to wrap your complete application in a <OkaLayout></OkaLayout> to make it work. Below is a simple Layout to get started place the below code in App.js or App.tsx

<OkaLayout themeBuilder={false}>
  <OkaSider>
    <OkaSiderItem to="/pathname" title="Some Text" />
    <OkaSiderItem to="/pathname" title="some Text">
      <OkaSiderSubMenuItem>
        <OkaSiderItem to="/pathname" title="Some Text" />
      </OkaSiderSubMenuItem>
    </OkaSiderItem>
  </OkaSider>

  <OkaMain>
    <OkaHeader titleText="Title Text" showLogo={false}>
      <OkaItem display={"flex"} alignX="end" alignY={"center"}>
        <OkaHeaderCollapse>
          <OkaHeaderMenuItem to="https://bridge.ferrum.network/" title="Bridge Ferrum" target="_blank" />
          <OkaHeaderMenuItem to="/global/sizing" title="Sizing" />
            <OkaSiderSubMenuItem>
              <OkaHeaderMenuItem to="/pathname" title="Some Text" />
            </OkaSiderSubMenuItem>
          </OkaHeaderMenuItem>
          <OkaHeaderMenuItem to="/components/forms" title="Components">
            <OkaHeaderSubMenuItem>
              <OkaHeaderMenuItem to="/components/forms" title="Forms" />
            </OkaHeaderSubMenuItem>
          </OkaHeaderMenuItem>
        </OkaHeaderCollapse>
      </OkaItem>
    </OkaHeader>

    <OkaContainer type="fluid">
      <OkaContainer>
        <OkaTypo size={40} weight={500}>
          Add you switch/route here
        </OkaTypo>
        <OkaCardTitle title></OkaCardTitle>
        <OkaButton
          title="Connect"
          btnInfo={
            <OkaItem display={"flex"}>
              <OkaTruncateText className="oka-ml-1" text={"0x071ef1A1f8B92A2d4E48b35705481c92E64b3d08"} />
            </OkaItem>
          }
        />
    </OkaContainer>

    <OkaFooter />
  </OkaMain>
</OkaLayout>

Layout Components

• OkaLayout
• OkaContainer
• OkaMain

Header Components

• OkaHeader
• OkaHeaderCollapse
• OkaHeaderMenuItem
• OkaHeaderSubMenuItem

Footer Component

• OkaFooter

Grid Component

• OkaGrid
• OkaGridItem
• OkaCard

SiderBar Components

• OkaSider
• OkaSiderItem
• OkaSiderSubMenuItemem

Drawer Components

• OkaDrawer

Other Useful Component

• OkaTruncateText
• OkaItem
• OkaTypo
• OkaIcon -
• OkaResponseBar
• OkaDivider
• OkaList
• OkaListItem
• OkaLabel
• OkaTooltip
• OkaLink

Card Components

• OkaCardTitle

Button Components

• OkaButton

Dialog Components

• OkaDialog

Form Components

• OkaTextarea
• OkaInputText
• OkaInputRadio
• OkaInputCheckbox
• OkaSelect
• OkaDatepicker

Table Compnent

• OkaTable

Loader Compnent

• OkaLoader

Extra Features

• ThemeBuilder
• OkaThemeProvider