Spacer

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Flex,
  Heading,
  Spacer,
  HStack,
  Badge,
  Button,
  VStack,
  Text,
  Box
} from "@pimolu/react";

function Pill({ children, }: {
  children: string;
}) {
  return (
    <Box padding={2} paddingX={3} background="muted">
      <Text size="sm">
        {children}
      </Text>
    </Box>
  );
}

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>App bar</CardTitle>
          <CardDescription>
            The brand and the actions stay at opposite ends at every width.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Flex gap={3} align="center" wrap fullWidth>
            <Heading level={3} size="md">Pimolu</Heading>
            <Spacer />
            <HStack gap={2} align="center">
              <Badge variant="secondary">docs</Badge>
              <Button size="sm" appearance="ghost">Sign in</Button>
              <Button size="sm">Get started</Button>
            </HStack>
          </Flex>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Card footer</CardTitle>
          <CardDescription>
            A spacer pushes the secondary action away from the primary one.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <VStack gap={4}>
            <Text size="sm" tone="muted">
              Changes are saved automatically when the dialog closes.
            </Text>
            <HStack gap={2} align="center">
              <Button size="sm" appearance="ghost">Discard</Button>
              <Spacer />
              <Button size="sm" appearance="outline">Save draft</Button>
              <Button size="sm">Publish</Button>
            </HStack>
          </VStack>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Divider rhythm</CardTitle>
          <CardDescription>
            Fixed spacers separate label groups without extra margins.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <HStack gap={0} align="center" wrap>
            <Pill>Profile</Pill>
            <Spacer
              size={4}
              axis="horizontal"
              style={{
                height: 1,
                background: "var(--pimolu-border)",
              }}
            />
            <Pill>Security</Pill>
            <Spacer
              size={4}
              axis="horizontal"
              style={{
                height: 1,
                background: "var(--pimolu-border)",
              }}
            />
            <Pill>Notifications</Pill>
          </HStack>
        </CardContent>
      </Card>
    </div>
  );
}