Card

import { Button, Card, H5 } from "@clawscale/react";

export default function CardBasic() {
  return (
    <Card style={{ maxWidth: 360 }}>
      <H5>orders_daily</H5>
      <p>Daily order snapshot from the sales warehouse. 1,204,331 rows, refreshed at 02:00 UTC.</p>
      <Button icon="th" text="Open table" />
    </Card>
  );
}

import { Card, H5 } from "@clawscale/react";
import { useState } from "react";

const DATASETS = [
  { name: "orders_daily", rows: "1,204,331 rows" },
  { name: "customers", rows: "88,412 rows" },
  { name: "ledger_entries", rows: "14,602,118 rows" },
];

export default function CardInteractive() {
  const [selected, setSelected] = useState("orders_daily");
  return (
    <>
      {DATASETS.map((dataset) => (
        <Card
          key={dataset.name}
          interactive
          selected={dataset.name === selected}
          onClick={() => setSelected(dataset.name)}
          style={{ width: 200 }}
        >
          <H5>{dataset.name}</H5>
          <span className="cs-numeric">{dataset.rows}</span>
        </Card>
      ))}
    </>
  );
}

import { Card } from "@clawscale/react";

export default function CardElevation() {
  return (
    <>
      <Card elevation={0}>Elevation 0</Card>
      <Card elevation={1}>Elevation 1</Card>
      <Card elevation={2}>Elevation 2</Card>
      <Card elevation={3}>Elevation 3</Card>
      <Card elevation={4}>Elevation 4</Card>
    </>
  );
}

import { Card, Tag } from "@clawscale/react";

export default function CardCompact() {
  return (
    <>
      <Card style={{ display: "flex", justifyContent: "space-between", width: 260 }}>
        ingest-orders
        <Tag minimal intent="success">
          Healthy
        </Tag>
      </Card>
      <Card compact style={{ display: "flex", justifyContent: "space-between", width: 260 }}>
        ingest-orders
        <Tag minimal intent="success">
          Healthy
        </Tag>
      </Card>
    </>
  );
}