Docs
Container
Container
Installation
import React from "react";
import type { VariantProps } from "cva";
import { cva } from "cva";
import { cn } from "@/lib/utils";
export const Container = ({
children,
className,
grow,
}: {
children?: React.ReactNode;
className?: string;
grow?: boolean;
}) => {
return (
<div
className={cn(
"flex w-full items-center justify-center px-6 -sm:px-4",
grow && "grow overflow-scroll",
className,
)}
>
{children}
</div>
);
};
const containerInnerVariants = cva({
base: "h-full w-full max-w-6xl grow space-y-4",
variants: {
width: {
default: "max-w-7xl",
lg: "max-w-8xl",
xl: "max-w-[90rem]",
max: "max-w-[2000px]",
},
},
defaultVariants: {
width: "default",
},
});
export const ContainerInner = ({
children,
className,
width,
}: {
children?: React.ReactNode;
className?: string;
} & VariantProps<typeof containerInnerVariants>) => {
return (
<div className={cn(containerInnerVariants({ width }), className)}>
{children}
</div>
);
};