39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
export function EnvOverrideWarning() {
|
||
return (
|
||
<div className="text-2xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-500/15 border border-amber-100 dark:border-amber-500/30 px-2 py-1 rounded mt-1">
|
||
環境変数で上書きされています（保存しても反映されません）
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function FieldLabel({ children }: { children: React.ReactNode }) {
|
||
return <label className="block text-2xs font-medium text-slate-600 mb-1">{children}</label>;
|
||
}
|
||
|
||
interface FieldInputProps {
|
||
value: string | number;
|
||
onChange: (value: string) => void;
|
||
type?: 'text' | 'number' | 'password';
|
||
placeholder?: string;
|
||
/** ENV 上書きなどで編集を無効化したい場合に true を渡す */
|
||
disabled?: boolean;
|
||
/** disabled の理由を tooltip として表示 */
|
||
disabledReason?: string;
|
||
}
|
||
|
||
export function FieldInput({ value, onChange, type = 'text', placeholder, disabled, disabledReason }: FieldInputProps) {
|
||
return (
|
||
<input
|
||
type={type}
|
||
value={value}
|
||
onChange={e => onChange(e.target.value)}
|
||
placeholder={placeholder}
|
||
disabled={disabled}
|
||
title={disabled ? disabledReason : undefined}
|
||
className={`w-full h-8 px-2.5 text-[13px] border border-hairline rounded-md focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none transition-shadow ${
|
||
disabled ? 'bg-slate-50 text-slate-500 cursor-not-allowed' : 'bg-canvas'
|
||
}`}
|
||
/>
|
||
);
|
||
}
|