AspectRatio

"use client";

import {
  Card,
  AspectRatio,
  CardHeader,
  HStack,
  CardTitle,
  Badge,
  CardDescription,
  CardContent,
  Text,
  Box,
  Stack,
  Heading,
  Paragraph,
  Button
} 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>
        <AspectRatio ratio={16 / 9}>
          <img
            src="/images/pimolu-studio.webp"
            alt="Pimolu Studio headphones with the p emblem"
          />
        </AspectRatio>
        <CardHeader>
          <HStack justify="between" align="center">
            <CardTitle>Pimolu Studio</CardTitle>
            <Badge variant="success">New</Badge>
          </HStack>
          <CardDescription>
            The media reserves its space, so the card does not jump when the
            image arrives.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Text weight="semibold">€129</Text>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Video embed</CardTitle>
          <CardDescription>16 / 9 matches the default video frame.</CardDescription>
        </CardHeader>
        <CardContent>
          <AspectRatio
            ratio={16 / 9}
            style={{
              borderRadius: "var(--pimolu-radius-md)",
              overflow: "hidden",
            }}
          >
            <Box
              background="muted"
              fullWidth
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Stack gap={2} align="center">
                <Text weight="medium">Video placeholder</Text>
                <Text size="sm" tone="muted">iframe, video or canvas fills the box</Text>
              </Stack>
            </Box>
          </AspectRatio>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Gallery tile</CardTitle>
          <CardDescription>
            A square tile keeps a grid of different products aligned.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Stack gap={3}>
            <AspectRatio ratio={1}>
              <img
                src="/images/pimolu-studio.webp"
                alt="Pimolu Studio, square crop"
              />
            </AspectRatio>
            <Stack gap={1}>
              <Heading level={3} size="md">Everyday collection</Heading>
              <Paragraph size="sm" tone="muted">
                Square media is predictable in a masonry or a carousel.
              </Paragraph>
              <Button size="sm" appearance="outline">Browse the collection</Button>
            </Stack>
          </Stack>
        </CardContent>
      </Card>
    </div>
  );
}