Flex

import * as React from "react";

export interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
  direction?: "row" | "column" | "row-reverse" | "column-reverse";
  alignItems?: "center" | "flex-start" | "flex-end" | "stretch";
  justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around";
  gap?: string | number;
}

export function Flex({
  children,
  direction,
  alignItems,
  justifyContent,
  style,
  gap,
  ...props
}: FlexProps) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: direction,
        alignItems,
        justifyContent,
        gap,
        ...style
      }}
      {...props}
    >
      {children}
    </div>
  );
}