Grid

"use client";

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

export function DemoExample() {
  return (
    <Stack gap={4}>
      <Grid columns="auto-fit" minItemWidth={220} gap={4}>
        {
          [
            {
              name: "Pimolu Studio",
              price: "€129",
              tag: "Shoes",
            },
            {
              name: "Canvas tote",
              price: "€39",
              tag: "Bags",
            },
            {
              name: "Merino cap",
              price: "€29",
              tag: "Accessories",
            },
          ].map((product) => (<Card key={product.name}>
            <img
              className="block w-full max-h-64 object-contain rounded-md bg-surface"
              src="/images/pimolu-studio.webp"
              alt={product.name}
            />
            <CardHeader>
              <HStack justify="between" align="center">
                <CardTitle>
                  {product.name}
                </CardTitle>
                <Badge variant="secondary">
                  {product.tag}
                </Badge>
              </HStack>
              <CardDescription>Ships in 2–3 working days.</CardDescription>
            </CardHeader>
            <CardContent>
              <Text weight="semibold">
                {product.price}
              </Text>
            </CardContent>
            <CardFooter>
              <Button size="sm" fullWidth>Add to cart</Button>
            </CardFooter>
          </Card>))
        }
      </Grid>
      <Grid columns="auto-fit" minItemWidth={180} gap={4} align="stretch">
        {
          [
            ["Revenue", "€24,180", "+12.4%"],
            ["Active users", "8,420", "+4.1%"],
            ["Churn", "1.8%", "−0.3%"],
            ["NPS", "62", "+6"],
          ].map(([label, value, delta]) => (<Box
            key={label}
            padding={4}
            background="surface"
          >
            <Stack gap={1}>
              <Text size="sm" tone="muted">
                {label}
              </Text>
              <Heading level={3} size="xl">
                {value}
              </Heading>
              <Text size="sm" tone="success">
                {delta}
              </Text>
            </Stack>
          </Box>))
        }
      </Grid>
      <Grid columns="auto-fit" minItemWidth={240} gap={4}>
        <Box padding={6} background="surface">
          <Stack gap={2}>
            <Badge variant="primary">Feature</Badge>
            <Heading level={3} size="lg">One system, every platform</Heading>
            <Paragraph size="sm" tone="muted">
              Grid on web, Stack on native: the same scale names describe the
              same rhythm.
            </Paragraph>
          </Stack>
        </Box>
        <Box padding={6} background="muted">
          <Stack gap={2}>
            <Text size="sm" tone="muted">Track behaviour</Text>
            <Text size="sm">
              auto-fit removes empty tracks; auto-fill reserves them so the
              layout does not jump when items are removed.
            </Text>
          </Stack>
        </Box>
      </Grid>
    </Stack>
  );
}