Example Utils

Infma is used for component styling.

Navbar

JavaScript

const Navbar = ({ children }) => (
  <nav className="navbar">
    <div className="navbar__inner">
      <div className="navbar__items">{children}</div>
    </div>
  </nav>
);

TypeScript

const Navbar: React.FC = ({ children }) => (
  <nav className="navbar">
    <div className="navbar__inner">
      <div className="navbar__items">{children}</div>
    </div>
  </nav>
);

useDropdown

JavaScript

const useDropdown = (label, list, init = 0) => {
  const [index, set] = React.useState(init);
  const element = (
    <div className="navbar__item dropdown dropdown--hoverable">
      <p className="navbar__link">{`${label}: ${list[index]}`}</p>
      <ul className="dropdown__menu">
        {list.map((item, i) => (
          <li key={item}>
            <p className="dropdown__link" onClick={() => set(i)}>{item}</p>
          </li>
        ))}
      </ul>
    </div>
  );
  return [value, element];
};

TypeScript

const useDropdown = (label: string, list: string[], init = 0) => {
  const [index, set] = React.useState(init);
  const element = (
    <div className="navbar__item dropdown dropdown--hoverable">
      <p className="navbar__link">{`${label}: ${list[index]}`}</p>
      <ul className="dropdown__menu">
        {list.map((item, i) => (
          <li key={item}>
            <p className="dropdown__link" onClick={() => set(i)}>{item}</p>
          </li>
        ))}
      </ul>
    </div>
  );
  return [value, element];
};

Sample Card

The CardProps definition is here.

JavaScript

const Card = ({ data, index, style }) => (
  <div className="card" style={{ ...style }}>
    <div className="card__body">
      <h2>{data[index]}</h2>
    </div>
  </div>
);

TypeScript

const Card: React.FC<CardProps> = ({ data, index, style }) => (
  <div className="card" style={{ ...style }}>
    <div className="card__body">
      <h2>{data[index]}</h2>
    </div>
  </div>
);