69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { ToggleLeft, ToggleRight } from 'lucide-react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { SystemSetting } from '@/lib/api';
|
|
import { getSettingMeta } from '@/lib/system-settings-catalog';
|
|
|
|
function parseBoolean(value: string) {
|
|
return ['true', '1', 'yes'].includes(value.trim().toLowerCase());
|
|
}
|
|
|
|
interface SettingsFieldRowProps {
|
|
setting: SystemSetting;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export function SettingsFieldRow({ setting, onChange }: SettingsFieldRowProps) {
|
|
const meta = getSettingMeta(setting.key);
|
|
const label = meta?.label ?? setting.key;
|
|
const type = meta?.type ?? 'text';
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 border-b border-[#e8eaef] py-4 last:border-b-0 last:pb-0 first:pt-0 md:flex-row md:items-center md:justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="font-semibold">{label}</div>
|
|
<p className="mt-1 text-sm text-[#667085]">{meta?.hint ?? setting.description ?? setting.key}</p>
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
{type === 'boolean' ? (
|
|
<button
|
|
type="button"
|
|
aria-label={label}
|
|
onClick={() => onChange(parseBoolean(setting.value) ? 'false' : 'true')}
|
|
>
|
|
{parseBoolean(setting.value) ? (
|
|
<ToggleRight className="h-9 w-9 text-green-600" />
|
|
) : (
|
|
<ToggleLeft className="h-9 w-9 text-[#a8adbc]" />
|
|
)}
|
|
</button>
|
|
) : type === 'select' ? (
|
|
<select
|
|
className="h-10 min-w-[220px] rounded-xl border border-[#e4e7ec] bg-white px-3 text-sm outline-none focus:border-[#98a2b3]"
|
|
value={setting.value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
>
|
|
{(meta?.options ?? []).map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<>
|
|
<Input
|
|
type={setting.isSecret ? 'password' : type === 'number' ? 'number' : 'text'}
|
|
value={setting.value}
|
|
className={setting.isSecret ? 'w-full min-w-[240px] bg-white md:w-[280px]' : 'w-full min-w-[180px] bg-white md:w-[220px]'}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
/>
|
|
{meta?.unit ? <span className="text-sm text-[#667085]">{meta.unit}</span> : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|