30 lines
638 B
TypeScript
30 lines
638 B
TypeScript
import type { ElementType, ReactNode } from "react";
|
|
|
|
type ContainerVariant = "default" | "narrow" | "wide";
|
|
|
|
interface ContainerProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
as?: ElementType;
|
|
variant?: ContainerVariant;
|
|
}
|
|
|
|
const variantClasses: Record<ContainerVariant, string> = {
|
|
default: "container",
|
|
narrow: "container container--narrow",
|
|
wide: "container container--wide",
|
|
};
|
|
|
|
export function Container({
|
|
children,
|
|
className = "",
|
|
as: Tag = "div",
|
|
variant = "default",
|
|
}: ContainerProps) {
|
|
return (
|
|
<Tag className={`${variantClasses[variant]} ${className}`.trim()}>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
}
|