Stack

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  VStack,
  HStack,
  Text,
  Spacer,
  Button,
  Badge,
  Heading,
  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>Notification settings</CardTitle>
          <CardDescription>Rows with a label, a hint and an action.</CardDescription>
        </CardHeader>
        <CardContent>
          <VStack gap={4}>
            {
              [
                [
                  "Product updates",
                  "A short summary every Friday.",
                ],
                [
                  "Security alerts",
                  "Sign-ins from a new device.",
                ],
                [
                  "Billing",
                  "Invoices and failed payments.",
                ],
              ].map(([title, description]) => (<HStack
                key={title}
                gap={3}
                align="start"
              >
                <VStack gap={1}>
                  <Text weight="medium">
                    {title}
                  </Text>
                  <Text size="sm" tone="muted">
                    {description}
                  </Text>
                </VStack>
                <Spacer />
                <Button size="sm" appearance="outline">Manage</Button>
              </HStack>))
            }
          </VStack>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Article layout</CardTitle>
          <CardDescription>A vertical stack with a horizontal meta row.</CardDescription>
        </CardHeader>
        <CardContent>
          <VStack gap={3} align="start">
            <Badge variant="primary">Guide</Badge>
            <Heading level={3} size="lg">Compose instead of override</Heading>
            <Paragraph size="sm" tone="muted">
              Layout primitives keep spacing on the token scale. When a page
              needs a new rhythm, the scale gains a step rather than the page
              gaining a magic number.
            </Paragraph>
            <HStack gap={2} align="center">
              <Text size="sm" weight="medium">Amélie Bernard</Text>
              <Text size="sm" tone="muted">·</Text>
              <Text size="sm" tone="muted">6 min read</Text>
            </HStack>
          </VStack>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Checkout summary</CardTitle>
          <CardDescription>
            HStack with a spacer keeps the total on the right.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <VStack gap={3}>
            <HStack justify="between">
              <Text size="sm" tone="muted">Subtotal</Text>
              <Text size="sm">€148</Text>
            </HStack>
            <HStack justify="between">
              <Text size="sm" tone="muted">Shipping</Text>
              <Text size="sm">€9</Text>
            </HStack>
            <HStack align="center">
              <Text weight="medium">Total</Text>
              <Spacer />
              <Text weight="semibold">€157</Text>
            </HStack>
            <Button fullWidth>Pay securely</Button>
          </VStack>
        </CardContent>
      </Card>
    </div>
  );
}