- EnvironmentSelector: bare <select> -> DS Select - LogTab: raw <table> + <input> + <button> -> DS LogViewer + Input + Button - AppsTab: 3 homegrown sub-tab bars -> DS Tabs, remove unused CSS - AppConfigDetailPage: 4x <select> -> DS Select, 2x <input checkbox> -> DS Toggle, 7x <label> -> DS Label, 4x <button> -> DS Button - AgentHealth: 4x <select> -> DS Select, 7x <button> -> DS Button Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
31 lines
786 B
TypeScript
31 lines
786 B
TypeScript
import { useMemo } from 'react';
|
|
import { Select } from '@cameleer/design-system';
|
|
import styles from './EnvironmentSelector.module.css';
|
|
|
|
interface EnvironmentSelectorProps {
|
|
environments: string[];
|
|
value: string | undefined;
|
|
onChange: (env: string | undefined) => void;
|
|
}
|
|
|
|
export function EnvironmentSelector({ environments, value, onChange }: EnvironmentSelectorProps) {
|
|
if (environments.length === 0) return null;
|
|
|
|
const options = useMemo(
|
|
() => [
|
|
{ value: '', label: 'All Envs' },
|
|
...environments.map((env) => ({ value: env, label: env })),
|
|
],
|
|
[environments],
|
|
);
|
|
|
|
return (
|
|
<Select
|
|
className={styles.select}
|
|
options={options}
|
|
value={value ?? ''}
|
|
onChange={(e) => onChange(e.target.value || undefined)}
|
|
/>
|
|
);
|
|
}
|