31 lines
1021 B
TypeScript
31 lines
1021 B
TypeScript
|
import { ChevronDown } from 'lucide-react';
|
||
|
|
import type { Environment } from '../api/queries/admin/environments';
|
||
|
|
import { envColorVar } from './env-colors';
|
||
|
|
import styles from './EnvironmentSwitcherButton.module.css';
|
||
|
|
|
||
|
|
interface EnvironmentSwitcherButtonProps {
|
||
|
|
envs: Environment[];
|
||
|
|
value: string | undefined;
|
||
|
|
onClick: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function EnvironmentSwitcherButton({ envs, value, onClick }: EnvironmentSwitcherButtonProps) {
|
||
|
|
const current = envs.find((e) => e.slug === value);
|
||
|
|
const displayName = current?.displayName ?? value ?? 'Select environment';
|
||
|
|
const color = envColorVar(current?.color);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={styles.button}
|
||
|
|
onClick={onClick}
|
||
|
|
aria-label="Switch environment"
|
||
|
|
aria-haspopup="dialog"
|
||
|
|
>
|
||
|
|
<span className={styles.dot} style={{ background: color }} aria-hidden />
|
||
|
|
<span className={styles.name}>{displayName}</span>
|
||
|
|
<ChevronDown size={14} className={styles.chevron} aria-hidden />
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|