Flex

import { Flex } from "@/components/ui/flex";

export default function Example() {
  return <Flex />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Flex = forwardRef(({ className, direction, wrap, align, justify, gap, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex",
      direction === "row" && "flex-row",
      direction === "col" && "flex-col",
      direction === "row-reverse" && "flex-row-reverse",
      direction === "col-reverse" && "flex-col-reverse",
      wrap && "flex-wrap",
      align === "start" && "items-start",
      align === "center" && "items-center",
      align === "end" && "items-end",
      align === "stretch" && "items-stretch",
      align === "baseline" && "items-baseline",
      justify === "start" && "justify-start",
      justify === "center" && "justify-center",
      justify === "end" && "justify-end",
      justify === "between" && "justify-between",
      justify === "around" && "justify-around",
      justify === "evenly" && "justify-evenly",
      gap === 1 && "gap-1",
      gap === 2 && "gap-2",
      gap === 3 && "gap-3",
      gap === 4 && "gap-4",
      gap === 6 && "gap-6",
      gap === 8 && "gap-8",
      className
    )}
    {...props}
  />
));
Flex.displayName = "Flex";

export { Flex };