import { Container } from '@primitivekit/react';

<Container>
  <h1>Page Content</h1>
  <p>This content is centered and constrained to a maximum width.</p>
</Container>

// Small container (max-width: 640px)
<Container size="sm">
  Small container
</Container>

// Medium container (max-width: 768px)
<Container size="md">
  Medium container
</Container>

// Large container (max-width: 1024px)
<Container size="lg">
  Large container
</Container>

// Extra large container (max-width: 1280px)
<Container size="xl">
  Extra large container
</Container>

// Full width (no max-width)
<Container size="full">
  Full width container
</Container>

<Container centered>
  Centered content
</Container>

<Container padding="large">
  Container with padding
</Container>

<Container
  style={{
    '--container-max-width': '1200px',
    '--container-padding-x': '32px',
    '--container-padding-y': '24px',
  }}
>
  Custom container
</Container>

function Page() {
  return (
    <Container size="xl">
      <header>
        <h1>My Website</h1>
      </header>
      
      <main>
        <p>Main content</p>
      </main>
      
      <footer>
        <p>© 2024</p>
      </footer>
    </Container>
  );
}

<Container size="xl">
  <h1>Full Width Header</h1>
  
  <Container size="md">
    <p>Narrower content for better readability</p>
  </Container>
</Container>