GitFOSS

// 3rd-party
import React, { VFC } from "react";
import styled, { css } from "styled-components";
// app
import type { WithThemeSchemeProp } from "../types";
import { NamedColors } from "../utils/style";

export interface InlineCodeProps extends React.HTMLAttributes<HTMLPreElement> {
  children: string | JSX.Element;
  fluid?: boolean;
  codeProps?: React.HTMLAttributes<HTMLElement>;
}

export const InlineCode: VFC<InlineCodeProps & WithThemeSchemeProp> = ({
  themeScheme,
  children,
  codeProps = {},
  fluid = false,
  ...preProps
}) => {
  return (
    <StyledPreTag fluid={fluid} themeScheme={themeScheme} {...preProps}>
      <StyledCodeTag fluid={fluid} {...codeProps}>
        {children}
      </StyledCodeTag>
    </StyledPreTag>
  );
};

const StyledPreTag = styled.pre<
  WithThemeSchemeProp & Pick<InlineCodeProps, "fluid">
>`
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;

  box-shadow: none !important;
  text-shadow: none !important;

  border-radius: 8px;

  ${({ themeScheme }) => css`
    background-color: ${NamedColors.CARD[themeScheme]} !important;
    border: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]} !important;
  `};

  ${({ fluid }) =>
    fluid &&
    css`
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      min-height: 44px; // to account for the scrollbar overlayed on-top of code
      width: 100%;
      max-width: 100%;
      overflow: auto;
    `};
`;

const StyledCodeTag = styled.code<Pick<InlineCodeProps, "fluid">>`
  display: block;

  min-height: 20px;
  width: 100%;
  padding: 4px 8px;

  font-size: 16px;
  border-radius: 4px !important;

  ${({ fluid }) =>
    fluid &&
    css`
      padding: 8px 16px;
    `};
`;