Flex

"use client";

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

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>Toolbar</CardTitle>
          <CardDescription>The actions stay on the right at every width.</CardDescription>
        </CardHeader>
        <CardContent>
          <Flex gap={2} align="center" wrap fullWidth>
            <Heading level={3} size="md">Projects</Heading>
            <Spacer />
            <Button size="sm" appearance="outline">Filter</Button>
            <Button size="sm">New project</Button>
          </Flex>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Media object</CardTitle>
          <CardDescription>A fixed thumbnail next to fluid text.</CardDescription>
        </CardHeader>
        <CardContent>
          <Flex gap={3} align="start">
            <img
              className="block w-full max-h-64 object-contain rounded-md bg-surface"
              src="/images/pimolu-studio.webp"
              alt="Pimolu Studio headphones with the p emblem"
              width={96}
              height={96}
              style={{
                width: 96,
                height: 96,
                flex: "0 0 96px",
              }}
            />
            <Stack gap={1}>
              <Text weight="medium">Pimolu Studio</Text>
              <Text size="sm" tone="muted">
                Lightweight sneaker for everyday runs. The text takes the
                remaining width and wraps instead of pushing the image.
              </Text>
              <HStack gap={2} align="center">
                <Badge variant="success">In stock</Badge>
                <Text size="sm">€129</Text>
              </HStack>
            </Stack>
          </Flex>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Split layout</CardTitle>
          <CardDescription>Two equal panes with a token gap.</CardDescription>
        </CardHeader>
        <CardContent>
          <Flex gap={4} align="stretch">
            <Flex grow={1} basis={0}>
              <Box padding={4} background="muted" fullWidth>
                <Paragraph size="sm">
                  Primary pane: grows from a zero basis, so both sides stay equal.
                </Paragraph>
              </Box>
            </Flex>
            <Flex grow={1} basis={0}>
              <Box padding={4} background="muted" fullWidth>
                <Paragraph size="sm">Secondary pane: same rule, same width.</Paragraph>
              </Box>
            </Flex>
          </Flex>
        </CardContent>
      </Card>
    </div>
  );
}