Card

import { Badge } from "@brijbyte/agentic-ui/badge";
import { Button } from "@brijbyte/agentic-ui/button";
import { Card, CardHeader, CardBody, CardFooter } from "@brijbyte/agentic-ui/card";

import "@brijbyte/agentic-ui/badge.css";
import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/card.css";

export default function BasicDemo() {
  return (
    <>
      <Card style={{ width: 280 }}>
        <CardHeader heading="API Gateway" description="Production endpoint config" />
        <CardBody>
          <p
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-sm)",
              lineHeight: "var(--line-height-relaxed)",
              color: "var(--color-secondary)",
            }}
          >
            Route traffic through the API gateway to apply rate limiting, auth, and logging.
          </p>
        </CardBody>
        <CardFooter>
          <Badge variant="success" dot>
            Active
          </Badge>
          <span
            style={{
              marginLeft: "auto",
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-xs)",
              color: "var(--color-tertiary)",
            }}
          >
            us-east-1
          </span>
        </CardFooter>
      </Card>

      <Card elevated style={{ width: 280 }}>
        <CardHeader heading="Edge Worker" description="Cloudflare Workers runtime" />
        <CardBody>
          <p
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-sm)",
              lineHeight: "var(--line-height-relaxed)",
              color: "var(--color-secondary)",
            }}
          >
            Deploy serverless functions at the edge with sub-millisecond cold starts.
          </p>
        </CardBody>
        <CardFooter>
          <Badge variant="warning" dot>
            Deploying
          </Badge>
          <Button size="xs" variant="ghost" style={{ marginLeft: "auto" }}>
            View logs
          </Button>
        </CardFooter>
      </Card>
    </>
  );
}

import { Card, CardBody } from "@brijbyte/agentic-ui/card";
import "@brijbyte/agentic-ui/card.css";

export default function InteractiveDemo() {
  return (
    <Card interactive elevated style={{ width: 240 }}>
      <CardBody>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-1)" }}>
          <span
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-sm)",
              fontWeight: "var(--font-weight-semibold)",
              color: "var(--color-primary)",
            }}
          >
            Click me →
          </span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--font-size-xs)", color: "var(--color-tertiary)" }}>
            Hover + press states built in
          </span>
        </div>
      </CardBody>
    </Card>
  );
}