kleros/kleros-v2

import React from "react";
import styled, { css } from "styled-components";

import { Tooltip } from "@kleros/ui-components-library";

import _HelpIcon from "svgs/icons/help.svg";

import { landscapeStyle } from "styles/landscapeStyle";

const Container = styled.div`
  display: flex;
  align-items: center;
`;

const HelpIcon = styled(_HelpIcon)`
  display: flex;
  align-items: center;
  height: 12px;
  width: 12px;
  fill: ${({ theme }) => theme.klerosUIComponentsSecondaryText};
  margin: 0 0 0 8px;

  ${landscapeStyle(
    () => css`
      height: 14px;
      width: 14px;
    `
  )}
`;

interface IWithHelpTooltip {
  tooltipMsg: string;
  place?: "bottom" | "left" | "right" | "top";
  children?: React.ReactNode;
}

const WithHelpTooltip: React.FC<IWithHelpTooltip> = ({ tooltipMsg, children, place }) => (
  <Container>
    {children}
    <Tooltip small text={tooltipMsg} {...{ place }}>
      <HelpIcon />
    </Tooltip>
  </Container>
);

export default WithHelpTooltip;