Record widget

import React from "react"
import {Extensions, Widget} from "attio/client"

import {ArrWidgetContent} from "./arr-widget-content"

export default Extensions.defineExtension({
  type: "record-widget",
  id: "company-arr",
  label: "ARR",
  Widget: ({recordId}) => (
    <React.Suspense fallback={<Widget.Loading />}>
      <ArrWidgetContent recordId={recordId} />
    </React.Suspense>
  ),
  objects: "companies", // only show on company records
})

import React from "react"
import {Widget, Badge} from "attio/client"

import {useMyArrQuery} from "./use-my-arr-query"

export const ArrWidgetContent = ({recordId}: {recordId: string}) => {
  const {arr, delta} = useMyArrQuery(recordId) // may suspend!
  return (
    <Widget.TextWidget>
      <Widget.Title>ARR</Widget.Title>
      <Widget.Text.Primary>{arr}</Widget.Text.Primary>
      <Widget.Decoration>
        <Badge color={delta < 0 ? "red" : "green"}>{delta}</Badge>
      </Widget.Decoration>
    </Widget.TextWidget>
  )
}