Card

"use client";

import { Card, Badge, Button, Text, Box } from "astralis-ui";

export function CardDemo() {
  return (
    <Box w="full" maxW="xs">
      <Card>
        <Card.Header extra={<Badge colorScheme="green">Operational</Badge>}>
          <Card.Title>Production cluster</Card.Title>
          <Card.Description>us-east-1 · 12 nodes</Card.Description>
        </Card.Header>
        <Card.Body>
          <Text size="sm" color="muted">
            All services healthy. Last incident 42 days ago.
          </Text>
        </Card.Body>
        <Card.Footer>
          <Button variant="link" size="sm">View dashboard →</Button>
        </Card.Footer>
      </Card>
    </Box>
  );
}

"use client";

import { Card, Text, Grid } from "astralis-ui";

const variants = ["elevated", "outline", "filled"] as const;

export function CardVariants() {
  return (
    <Grid columns={{ base: "1", md: "3" }} gap="4" w="full" maxW="md">
      {variants.map((variant) => (
        <Card key={variant} variant={variant} size="sm" hoverable>
          <Card.Body>
            <Text size="sm" weight="medium">{variant}</Text>
            <Text size="xs" color="muted">hoverable: try me</Text>
          </Card.Body>
        </Card>
      ))}
    </Grid>
  );
}