All files / src/components/layout/Container index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { cn } from '@/lib/core';
import { ContainerProps } from '@/types/layout';

/**
 * Container Component
 *
 * A responsive container that centers content and applies consistent max-width.
 * Essential for maintaining consistent page layouts across the application.
 *
 * @example
 * ```tsx
 * <Container size="lg">
 *   <h1>Page Title</h1>
 *   <p>Page content...</p>
 * </Container>
 *
 * <Container size="md" noPadding>
 *   <div className="custom-padding">Custom layout</div>
 * </Container>
 *
 * <Container as="section" size="xl">
 *   <article>Semantic HTML with custom element</article>
 * </Container>
 * ```
 */
export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
  (
    {
      size = 'lg',
      noPadding = false,
      center = true,
      as: Component = 'div',
      className,
      children,
      ...props
    },
    ref
  ) => {
    const sizeStyles = {
      sm: 'max-w-screen-sm',
      md: 'max-w-screen-md',
      lg: 'max-w-screen-lg',
      xl: 'max-w-screen-xl',
      full: 'max-w-full'};

    const paddingStyles = noPadding ? '' : 'px-4 sm:px-6 lg:px-8';
    const centerStyles = center ? 'mx-auto' : '';

    return (
      <Component
        ref={ref}
        className={cn(
          'w-full',
          sizeStyles[size],
          paddingStyles,
          centerStyles,
          className
        )}
        {...props}
      >
        {children}
      </Component>
    );
  }
);

Container.displayName = 'Container';

export default Container;