Trigger to Action

Two-step recipe stacked vertically with a When trigger row, a downward arrow connector, and a Then action row, each with a brand-colored icon tile and event label.

Stripe
WhenStripe
Payment received
Slack
ThenSlack
Send #revenue alert

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Automation1 } from "@/components/beste/piece/automation1";

<Automation1
  triggerLabel="When"
  actionLabel="Then"
  trigger={{
    "src": "https://oud.pics/sm/l/stripe.jpeg",
    "alt": "Stripe",
    "event": "Payment received"
  }}
  action={{
    "src": "https://oud.pics/sm/l/slack.svg",
    "alt": "Slack",
    "event": "Send #revenue alert"
  }}
/>