jengacore components · @jengacore/env-chip

EnvChip

PRODUCTION, UAT, SANDBOX or DEV in the top bar.

PRODUCTIONUATSANDBOXDEV

Install

terminal

npx shadcn@latest add @jengacore/env-chip

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/env-chip.json

Registry dependencies

@jengacore/theme

Source

components/jc/env-chip.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

export type Environment = "prod" | "uat" | "sandbox" | "dev"

const TONE: Record<Environment, string> = {
  prod: "bg-destructive-subtle text-destructive",
  uat: "bg-warning-subtle text-warning",
  sandbox: "bg-info-subtle text-info",
  dev: "bg-muted text-muted-foreground",
}

const LABEL: Record<Environment, string> = { prod: "PRODUCTION", uat: "UAT", sandbox: "SANDBOX", dev: "DEV" }

/** Environment chip in the top bar. PRODUCTION is red only where operators must not forget it. */
export function EnvChip({ env, className }: { env: Environment; className?: string }) {
  return (
    <span data-slot="env-chip" className={cn("rounded-sm px-2 font-mono text-[10px] leading-5 tracking-[0.14em]", TONE[env], className)}>
      {LABEL[env]}
    </span>
  )
}