A card-style list for displaying environment variable names and values with masking, a show/hide toggle, and per-row copy-to-clipboard buttons.
import {
EnvironmentVariable,
EnvironmentVariableCopyButton,
EnvironmentVariableGroup,
EnvironmentVariableName,
EnvironmentVariableRequired,
EnvironmentVariableValue,
EnvironmentVariables,
EnvironmentVariablesContent,
EnvironmentVariablesHeader,
EnvironmentVariablesTitle,
EnvironmentVariablesToggle,
} from "@/components/ui/environment-variables";
const variables = [
{
name: "DATABASE_URL",
value: "postgres://user:pass@localhost:5432/db",
required: true,
},
{
name: "OPENAI_API_KEY",
value: "sk-1234567890abcdef1234567890abcdef",
required: true,
},
{ name: "NODE_ENV", value: "production", required: false },
];
export default function EnvironmentVariablesDemo() {
return (
<div className="w-full max-w-md">
<EnvironmentVariables>
<EnvironmentVariablesHeader>
<EnvironmentVariablesTitle />
<EnvironmentVariablesToggle />
</EnvironmentVariablesHeader>
<EnvironmentVariablesContent>
{variables.map((variable) => (
<EnvironmentVariable
key={variable.name}
name={variable.name}
value={variable.value}
>
<EnvironmentVariableGroup>
<EnvironmentVariableName />
{variable.required && <EnvironmentVariableRequired />}
</EnvironmentVariableGroup>
<EnvironmentVariableGroup>
<EnvironmentVariableValue />
<EnvironmentVariableCopyButton />
</EnvironmentVariableGroup>
</EnvironmentVariable>
))}
</EnvironmentVariablesContent>
</EnvironmentVariables>
</div>
);
}