Environment list

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/environment-list

Brings in: bidi, button, environment-band, freshness-stamp, heading-level, heading-scope, locale, locked, team, tokens, use-announcer, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { EnvironmentList, type ConnectedEnvironment } from "@/components/candor/environment-list"

const hoursAgo = (h: number) => new Date(Date.now() - h * 3_600_000).toISOString()

const start: ConnectedEnvironment[] = [
  { id: "prod", name: "Shop", production: true, hue: 1, connection: "connected", active: true, lastSyncAt: hoursAgo(0.2), summary: "1,667 items" },
  { id: "staging", name: "Shop", detail: "staging", production: false, hue: 2, connection: "connected", lastSyncAt: hoursAgo(26), summary: "1,640 items" },
  { id: "old", name: "Shop", detail: "dev-2", production: false, hue: 3, connection: "not-connected", lastSyncAt: null },
]

export default function Example() {
  const [environments, setEnvironments] = React.useState(start)
  return (
    <EnvironmentList
      className="max-w-2xl"
      environments={environments}
      onSetActive={(id) => setEnvironments((all) => all.map((e) => ({ ...e, active: e.id === id })))}
      onReconnect={() => {}}
      // Stands in for your service: it answers after a moment, then the list shows what it reports.
      onDisconnect={async (id) => {
        await new Promise((resolve) => setTimeout(resolve, 900))
        setEnvironments((all) => all.map((e) => (e.id === id ? { ...e, connection: "not-connected", active: false } : e)))
      }}
      disconnect={{
        stops: ["Syncing stops", "Agents can no longer read or change anything there"],
        stays: ["Everything already synced, and the history of what agents did"],
      }}
      onConnect={() => {}}
    />
  )
}

<EnvironmentList>

Strings

Types

ConnectedEnvironment

An environment as the list shows it: which one is active, when it last synced, and a line about it.

Environment & { /** The one the app acts on now. One at most. */ active?: boolean | undefined; /** When it last synced (ISO date); null when it never has. */ lastSyncAt: string | null; /** A line about it in the app's words ("1,667 items"), drawn as plain text. */ summary?: string | undefined; }

EnvironmentDisconnect

What disconnecting stops and what stays, in the app's words, as `IntegrationConnect` says it.

{ /** What stops: "Syncing stops", "Agents lose access". */ stops: string[]; /** What stays: "History and reports stay". */ stays: string[]; }

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

HeadingLevel from @/lib/candor/heading-level

A heading's level in the page's outline: `1` is `<h1>`, `6` is `<h6>`. Every Candor item that draws a heading takes its `headingLevel` as this type; the level is where the heading sits in the outline, never how large it looks.

1 | 2 | 3 | 4 | 5 | 6

Environment from @/lib/candor/team

Where agents act: a CRM instance, a database, a repository, a project. The app names them; LocaleProvider's `nouns` sets what they're called ("project", "workspace").

{ id: string; /** The name shown everywhere, e.g. "Shop". */ name: string; /** What tells same-named ones apart, e.g. "dev-2" or "staging". */ detail?: string | undefined; /** Changes here reach real users, so components warn and ask for more care. */ production: boolean; /** A chart slot (1–5) so each environment keeps one colour everywhere it appears. */ hue?: 1 | 2 | 3 | 4 | 5 | undefined; connection: "connected" | "expired" | "not-connected"; }