50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import clsx from 'clsx'
|
|
import {
|
|
type ComponentProps,
|
|
type HTMLAttributes,
|
|
type PropsWithChildren,
|
|
forwardRef,
|
|
} from 'react'
|
|
|
|
export const OuterContainer = forwardRef<
|
|
HTMLDivElement,
|
|
HTMLAttributes<HTMLDivElement>
|
|
>(function OuterContainer({ className, children, ...props }, ref) {
|
|
return (
|
|
<div ref={ref} className={clsx('sm:px-8', className)} {...props}>
|
|
<div className="mx-auto max-w-7xl lg:px-8">{children}</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export const InnerContainer = forwardRef<
|
|
HTMLDivElement,
|
|
HTMLAttributes<HTMLDivElement>
|
|
>(function InnerContainer({ className, children, ...props }, ref) {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={clsx('relative px-4 sm:px-8 lg:px-12', className)}
|
|
{...props}
|
|
>
|
|
<div className="mx-auto max-w-2xl lg:max-w-5xl">{children}</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export const Container: ReturnType<
|
|
typeof forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
|
|
> = forwardRef<HTMLDivElement>(function Container(
|
|
{
|
|
children,
|
|
...props
|
|
}: PropsWithChildren<ComponentProps<typeof OuterContainer>>,
|
|
ref,
|
|
) {
|
|
return (
|
|
<OuterContainer ref={ref} {...props}>
|
|
<InnerContainer>{children}</InnerContainer>
|
|
</OuterContainer>
|
|
)
|
|
})
|