opolis-components

Reusable TypeScript/React/Tailwind components for building web apps

Install

yarn add opolis-components

or

npm install --save opolis-components

Usage

import { Header, FormRow } from "opolis-components";
import 'opolis-components/dist/index.css'

const HeaderLinks = () => (
  <nav>
    <ul className='flex text-white gap-x-2'>
      {['link 1', 'link 2', 'link 3'].map((link, index) => (
        <li key={`link-${index}`}>
          <Link to='javascript:void(0)' title={link}>
            {link}
          </Link>
        </li>
      ))}
    </ul>
  </nav>
)

const options = [
    {
      VALUE: '',
      LABEL: 'Select…'
    },
    {
      LABEL: 'Option 1',
      VALUE: 'Option 1'
    },
    {
      LABEL: 'Option 2',
      VALUE: 'Option 2'
    }
  ]

export const HeaderTest = () => (
  <>
    <Header
      backgroundColor='orange'
      headerLinks={<HeaderLinks />}
    />

    <fieldset>
      <FormRow type="text" labelText="My Label" />
      <FormRow
        type='select'
        options={options}
        fieldName='field1'
        labelText='Choose an option'
      />
    </fieldset>
  </>

License

MIT © antibland