File size: 2,253 Bytes
3459571 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import {
SettingComponentProps,
InputComponentProps,
CheckboxComponentProps,
SliderComponentProps,
} from '@janhq/core'
import Checkbox from '@/containers/Checkbox'
import ModelConfigInput from '@/containers/ModelConfigInput'
import SliderRightPanel from '@/containers/SliderRightPanel'
type Props = {
componentProps: SettingComponentProps[]
disabled?: boolean
onValueUpdated: (key: string, value: string | number | boolean) => void
}
const SettingComponent: React.FC<Props> = ({
componentProps,
disabled = false,
onValueUpdated,
}) => {
const components = componentProps.map((data) => {
switch (data.controllerType) {
case 'slider': {
const { min, max, step, value } =
data.controllerProps as SliderComponentProps
return (
<SliderRightPanel
key={data.key}
title={data.title}
description={data.description}
min={min}
max={max}
step={step}
value={value}
name={data.key}
disabled={disabled}
onValueChanged={(value) => onValueUpdated(data.key, value)}
/>
)
}
case 'input': {
const { placeholder, value: textValue } =
data.controllerProps as InputComponentProps
return (
<ModelConfigInput
title={data.title}
disabled={disabled}
key={data.key}
name={data.key}
description={data.description}
placeholder={placeholder}
value={textValue}
onValueChanged={(value) => onValueUpdated(data.key, value)}
/>
)
}
case 'checkbox': {
const { value } = data.controllerProps as CheckboxComponentProps
return (
<Checkbox
key={data.key}
disabled={disabled}
name={data.key}
description={data.description}
title={data.title}
checked={value}
onValueChanged={(value) => onValueUpdated(data.key, value)}
/>
)
}
default:
return null
}
})
return <div className="flex flex-col gap-y-4">{components}</div>
}
export default SettingComponent
|