Needs you line

"use client"

import * as React from "react"
import { Badge } from "@/components/candor/ui/badge"
import { NeedsYouLine } from "@/components/candor/needs-you-line"

export default function Example() {
  // One count, read once, scoped to the workspace on screen: the line says it and the navigation's urgent badge shows
  // it (here a badge; in the app, the `count` of the Approvals place, with `urgent`).
  const [waiting, setWaiting] = React.useState<number | null>(null)
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2 text-sm">
        <span>Approvals</span>
        {waiting !== null && waiting > 0 && <Badge>{waiting}</Badge>}
      </div>
      <NeedsYouLine
        count={waiting}
        href="#approvals"
        reason="The approvals service didn’t answer."
        onRetry={() => setWaiting(3)}
        after="Here’s what happened since yesterday."
      />
      <NeedsYouLine count={0} after="Here’s what happened since yesterday." />
    </div>
  )
}