Container

"use client";

import {
  Container,
  Stack,
  Box,
  HStack,
  Badge,
  Text,
  Heading,
  Paragraph,
  Button
} from "@pimolu/react";

export function DemoExample() {
  return (
    <Container maxWidth="lg" padding={0}>
      <Stack gap={4}>
        <Box padding={6} background="muted">
          <HStack gap={3} align="center" wrap>
            <Badge variant="success">Stable</Badge>
            <Stack gap={1}>
              <Text weight="medium">Documentation layout</Text>
              <Text size="sm" tone="muted">
                A wide container for the body, a narrower one for the reading
                column below.
              </Text>
            </Stack>
          </HStack>
        </Box>
        <Container maxWidth="sm" padding={0}>
          <Stack gap={3}>
            <Heading level={3} size="md">Reading column</Heading>
            <Paragraph size="sm" tone="muted">
              The outer container caps the page at 1024px; the inner one
              narrows the prose to 640px without a second media query. The
              gutter is removed here because the outer container already
              provides it.
            </Paragraph>
            <HStack gap={2} wrap>
              <Button size="sm">Read the guide</Button>
              <Button size="sm" appearance="outline">View source</Button>
            </HStack>
          </Stack>
        </Container>
      </Stack>
    </Container>
  );
}