Variable Chips

About this piece

Autocomplete variables card grouped by source, with handlebars-wrapped violet chips for each path.

Usage

The import and the props worth knowing about, in one place.

import { Automation20 } from "@/components/beste/piece/automation20";

<Automation20
  surface="card"
  bordered={false}
  inverted={false}
  heading="Available variables"
  groups={[
    {
      "label": "Trigger",
      "variables": [
        "event.type",
        "event.created_at"
      ]
    },
    {
      "label": "Customer",
      "variables": [
        "customer.email",
        "customer.name"
      ]
    }
  ]}
/>