Center

"use client";

import {
  Card,
  CardContent,
  Center,
  Stack,
  Badge,
  Heading,
  Paragraph,
  Button,
  CardHeader,
  CardTitle,
  CardDescription,
  Box,
  Text,
  HStack
} 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>
        <CardContent>
          <Center minHeight={220}>
            <Stack gap={3} align="center">
              <Center inline minHeight={64}>
                <Badge variant="primary">+</Badge>
              </Center>
              <Stack gap={1} align="center">
                <Heading level={3} size="lg">No projects yet</Heading>
                <Paragraph size="sm" tone="muted" style={{ textAlign: "center" }}>
                  Create the first project to start collecting feedback.
                </Paragraph>
              </Stack>
              <Button size="sm">Create a project</Button>
            </Stack>
          </Center>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Sign-in panel</CardTitle>
          <CardDescription>
            Centering also works with a full-height section in a page
            layout.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Center
            minHeight={260}
            style={{
              background: "var(--pimolu-muted)",
              borderRadius: "var(--pimolu-radius-md)",
            }}
          >
            <Box
              padding={6}
              background="surface"
              style={{
                width: "100%",
                maxWidth: 280
              }}
            >
              <Stack gap={3}>
                <Text weight="medium">Welcome back</Text>
                <Text size="sm" tone="muted">
                  The panel is centered inside a muted stage; the action stays
                  full width.
                </Text>
                <Button size="sm" fullWidth>Continue</Button>
              </Stack>
            </Box>
          </Center>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Stats row</CardTitle>
          <CardDescription>
            Inline centers keep icon and label on the same baseline.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <HStack gap={4} wrap>
            {
              [
                ["12", "projects"],
                ["4.2k", "followers"],
                ["128", "reviews"],
              ].map(([value, label]) => (<HStack key={label} gap={2} align="center">
                <Center
                  inline
                  minHeight={36}
                  style={{
                    minWidth: 36,
                    borderRadius: "var(--pimolu-radius-full)",
                    background: "var(--pimolu-muted)",
                  }}
                >
                  <Text size="xs" weight="semibold">
                    {value}
                  </Text>
                </Center>
                <Text size="sm" tone="muted">
                  {label}
                </Text>
              </HStack>))
            }
          </HStack>
        </CardContent>
      </Card>
    </div>
  );
}