index.tsx50 lines · main

1	import { cva, type VariantProps } from 'class-variance-authority'
2	import { forwardRef, HTMLAttributes } from 'react'
3	import { cn } from 'ui'
4
5	// ============================================================================
6	// Variants
7	// ============================================================================
8
9	const pageContainerVariants = cva(['mx-auto w-full @container px-6 xl:px-10'], {
10	variants: {
11	size: {
12	small: 'max-w-[768px]',
13	default: 'max-w-[1200px]',
14	large: 'max-w-[1600px]',
15	full: 'max-w-none',
16	},
17	},
18	defaultVariants: {
19	size: 'default',
20	},
21	})
22
23	// ============================================================================
24	// Component
25	// ============================================================================
26
27	export type PageContainerProps = HTMLAttributes<HTMLDivElement> &
28	VariantProps<typeof pageContainerVariants>
29
30	/**
31	* Container component for page content.
32	* Provides consistent max-width and padding based on size prop.
33	*
34	* @example
35	* ```tsx
36	* <PageContainer size="large">
37	* <PageHeader>
38	* <PageHeaderTitle>My Page</PageHeaderTitle>
39	* </PageHeader>
40	* {children}
41	* </PageContainer>
42	* ```
43	*/
44	export const PageContainer = forwardRef<HTMLDivElement, PageContainerProps>(
45	({ className, size, ...props }, ref) => {
46	return <div ref={ref} {...props} className={cn(pageContainerVariants({ size }), className)} />
47	}
48	)
49
50	PageContainer.displayName = 'PageContainer'