38 lines
899 B
TypeScript
38 lines
899 B
TypeScript
import { HTMLAttributes, forwardRef } from 'react'
|
|
import { cn } from '@/utils/cn'
|
|
|
|
export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
|
|
}
|
|
|
|
const Container = forwardRef<HTMLDivElement, ContainerProps>(
|
|
({ className, maxWidth = 'xl', children, ...props }, ref) => {
|
|
const maxWidthStyles = {
|
|
sm: 'max-w-screen-sm',
|
|
md: 'max-w-screen-md',
|
|
lg: 'max-w-screen-lg',
|
|
xl: 'max-w-screen-xl',
|
|
'2xl': 'max-w-screen-2xl',
|
|
full: 'max-w-full',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
'mx-auto px-4 sm:px-6 lg:px-8',
|
|
maxWidthStyles[maxWidth],
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
Container.displayName = 'Container'
|
|
|
|
export default Container
|