58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
|
import StatusBadge from "./StatusBadge";
|
||
|
|
import { getStatusColors } from "../../utils/statusColors";
|
||
|
|
|
||
|
|
interface SelectFieldProps {
|
||
|
|
options: Record<string, string>;
|
||
|
|
value?: string;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
label?: string;
|
||
|
|
placeholder?: string;
|
||
|
|
disabled?: boolean;
|
||
|
|
className?: string;
|
||
|
|
statusColorsKey?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SelectField({
|
||
|
|
options,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
label,
|
||
|
|
placeholder,
|
||
|
|
disabled,
|
||
|
|
className = "",
|
||
|
|
statusColorsKey,
|
||
|
|
}: SelectFieldProps) {
|
||
|
|
const colors = statusColorsKey ? getStatusColors(statusColorsKey, value) : null;
|
||
|
|
const selectedLabel = value ? (options[value] ?? value) : "";
|
||
|
|
return (
|
||
|
|
<div className={className}>
|
||
|
|
{label && (
|
||
|
|
<label className="block text-[var(--color-text-muted)] font-medium mb-1">
|
||
|
|
{label}
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
<select
|
||
|
|
value={String(value ?? "")}
|
||
|
|
onChange={(e) => onChange(e.target.value)}
|
||
|
|
disabled={disabled}
|
||
|
|
className="w-full px-2 py-1 h-[28px] border border-[var(--color-input-border)] bg-white rounded-none outline-none focus:border-[var(--color-input-focus)] disabled:opacity-50 text-xs"
|
||
|
|
>
|
||
|
|
{placeholder && (
|
||
|
|
<option value="" disabled>
|
||
|
|
{placeholder}
|
||
|
|
</option>
|
||
|
|
)}
|
||
|
|
{Object.entries(options).map(([key, label]) => (
|
||
|
|
<option key={key} value={key}>
|
||
|
|
{label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
{colors && selectedLabel && (
|
||
|
|
<div className="mt-1">
|
||
|
|
<StatusBadge label={selectedLabel} {...colors} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|