Environment band

Pro

A slim strip naming the account and the environment in scope, in the environment's own colour. It's a safety cue, not decoration: you always know where your next change lands. Production turns the strip to a warning. An expired connection says so before you ask for anything.

Markdown

Preview

Install

With the Candor CLI

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

Brings in: dropdown-menu, locale, team, terms, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { EnvironmentBand } from "@/components/environment-band"
import type { Environment } from "@/lib/team"

const environments: Environment[] = [
  { id: "prod", name: "Storefront", production: true, hue: 1, connection: "connected" },
  { id: "staging", name: "Storefront", detail: "staging", production: false, hue: 2, connection: "connected" },
  { id: "dev", name: "Storefront", detail: "dev-2", production: false, hue: 3, connection: "expired" },
]

export default function Example() {
  const [environment, setEnvironment] = React.useState(environments[1]!)
  return (
    <div className="max-w-2xl overflow-hidden rounded-lg border">
      <EnvironmentBand account="Acme" environment={environment} environments={environments} onSelect={setEnvironment} onReconnect={() => {}} />
    </div>
  )
}

<EnvironmentBand>

Prop	Type	Default	Description
accountrequired	`string`	—	The account's name, shown before the environment on wider screens.
environmentrequired	`Environment`	—	The environment in scope; its hue colours the strip, and production turns it to a warning.
environments	`Environment[] \| undefined`	—	The environments to switch between; with `onSelect`, the name becomes a menu.
onSelect	`((environment: Environment) => void) \| undefined`	—	Called with the environment chosen from the menu.
onReconnect	`(() => void) \| undefined`	—	Shows Reconnect when the connection is expired or missing; called when it's pressed.
className	`string \| undefined`	—	Extra classes for the outer element.

<EnvironmentMark>

Prop	Type	Default	Description
environmentrequired	`Pick<Environment, "hue">`	—	The environment whose hue colours the dot; without a hue, the first chart colour.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under environmentBand in <LocaleProvider strings={{ … }}>; the table is exported as environmentBandStrings.

Key	English
production	Production
nonProduction	Non-production
environmentsIn	{environments} in {account}
notConnected	Not connected
current	Current
connectionExpired	Connection expired
reconnect	Reconnect