46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import TextArea from '@/components/ui/TextArea';
|
|
import TextInput from '@/components/ui/TextInput';
|
|
import AnimateFade from '@/components/wrap/AnimateFade';
|
|
|
|
interface TabOperationProps {
|
|
alias: string;
|
|
onChangeAlias: (newValue: string) => void;
|
|
title: string;
|
|
onChangeTitle: (newValue: string) => void;
|
|
comment: string;
|
|
onChangeComment: (newValue: string) => void;
|
|
}
|
|
|
|
function TabOperation({ alias, onChangeAlias, title, onChangeTitle, comment, onChangeComment }: TabOperationProps) {
|
|
return (
|
|
<AnimateFade className='cc-column'>
|
|
<TextInput
|
|
id='operation_title'
|
|
label='Полное название'
|
|
value={title}
|
|
onChange={event => onChangeTitle(event.target.value)}
|
|
/>
|
|
<div className='flex gap-6'>
|
|
<TextInput
|
|
id='operation_alias'
|
|
label='Сокращение'
|
|
className='w-[16rem]'
|
|
value={alias}
|
|
onChange={event => onChangeAlias(event.target.value)}
|
|
/>
|
|
|
|
<TextArea
|
|
id='operation_comment'
|
|
label='Описание'
|
|
noResize
|
|
rows={3}
|
|
value={comment}
|
|
onChange={event => onChangeComment(event.target.value)}
|
|
/>
|
|
</div>
|
|
</AnimateFade>
|
|
);
|
|
}
|
|
|
|
export default TabOperation;
|