PeopleElement

import { WhopElements, Tracking, PeopleElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Tracking /* options */>
        <PeopleElement onPeriodChanged={(payload) => console.log("periodChanged", payload)} onAttributionModelChanged={(payload) => console.log("attributionModelChanged", payload)} onFiltersChanged={(payload) => console.log("filtersChanged", payload)} onSortChanged={(payload) => console.log("sortChanged", payload)} onPersonOpened={(payload) => console.log("personOpened", payload)} />
      </Tracking>
    </WhopElements>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const tracking = window.WhopElements().tracking.create({ /* options */ });
  tracking.create('people', {
    onPeriodChanged: (payload) => console.log("periodChanged", payload),
    onAttributionModelChanged: (payload) => console.log("attributionModelChanged", payload),
    onFiltersChanged: (payload) => console.log("filtersChanged", payload),
    onSortChanged: (payload) => console.log("sortChanged", payload),
    onPersonOpened: (payload) => console.log("personOpened", payload)
  }).mount('#tracking-people');
</script>