Stack

import { Stack } from "@/components/ui/stack";

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

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

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

export { Stack };