"use client"; import { useState } from "react"; export function Integrations01() { const [query, setQuery] = useState(""); const matches = [ ["PostgreSQL", "Database", "Read usage from your existing event tables."], ["Snowflake", "Warehouse", "Bring rated usage into your finance models."], ["Stripe", "Billing", "Send reconciled totals to your invoice workflow."], ["Segment", "Events", "Route product events into a durable ledger."], ["S3", "Storage", "Archive daily exports in your own bucket."], ["Webhooks", "API", "Deliver signed updates to any endpoint."], ].filter((row) => row.join(" ").toLowerCase().includes(query.toLowerCase())); return (

marketing / integrations-01

Integration directory

A searchable directory of the systems that connect to your product.

Find an integration setQuery(event.target.value)} placeholder="Search by system or category" />

{matches.length} integrations

{matches.map(([name, category, copy]) => (

{category}

{name}

{copy}

))}

{matches.length === 0 && (

No matching systems. Try a category such as warehouse.

)}

); }