Inline component, horizontally flex components

Inline.tsx

import * as React from "react";
import { makeStyles } from "@material-ui/core/styles";

interface InlineProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  gap?: number;
  reverse?: boolean;
}

const useStyles = makeStyles((theme) => ({
  root: ({ gap, reverse }: { gap: number; reverse: boolean }) => {
    const attribute = reverse ? "marginLeft" : "marginRight";
    const direction = reverse ? "row-reverse" : "row";
    return {
      display: "flex",
      flexDirection: direction,
      "& > *": {
        [attribute]: theme.spacing(gap)
      },
      "& > *:last-child": {
        [attribute]: 0
      }
    };
  }
}));

const Inline: React.FC<InlineProps> = ({
  gap = 1,
  reverse = false,
  children,
  ...other
}) => {
  const classes = useStyles({ gap, reverse });
  return (
    <div className={classes.root} {...other}>
      {children}
    </div>
  );
};

export default Inline;