66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
/* eslint-disable react/forbid-component-props */
|
||
/* eslint-disable react/no-unused-prop-types */
|
||
'use client';
|
||
import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
|
||
import { mapFieldTypeElement } from '@/config/elements';
|
||
import Link from 'next/link';
|
||
import { Button, ElementContainer, Heading } from 'ui';
|
||
|
||
type Props = {
|
||
readonly data: ResponseGetData;
|
||
readonly metaData: ResponseMetaData;
|
||
readonly title: string;
|
||
};
|
||
|
||
export function FormHeader({ title, url }: Props & { readonly url: string }) {
|
||
return (
|
||
<div className="flex justify-between">
|
||
<Heading size={2}>{title}</Heading>
|
||
<Link href={url} className="text-primary-600 text-sm font-medium hover:underline">
|
||
Посмотреть условия
|
||
</Link>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function FormButtons() {
|
||
return (
|
||
<div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
|
||
<Button intent="outline-danger">Отмена</Button>
|
||
<Button intent="secondary">Возврат на доработку</Button>
|
||
<Button>Сохранить</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function FormElements({ data, metaData }: Props) {
|
||
return (
|
||
<div className="mt-2 grid auto-rows-auto grid-cols-1 gap-2 gap-x-4 md:grid-cols-2 lg:grid-cols-3">
|
||
{Object.keys(metaData).map((name) => {
|
||
const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];
|
||
|
||
if (!visible) return false;
|
||
|
||
const Element = mapFieldTypeElement[fieldType];
|
||
|
||
return (
|
||
<ElementContainer
|
||
key={name}
|
||
id={name}
|
||
title={fieldType === 'CHECKBOX' ? '' : metaData[name].label}
|
||
>
|
||
<Element
|
||
id={name}
|
||
defaultValue={data[name]}
|
||
title={label}
|
||
min={min}
|
||
max={max}
|
||
{...props}
|
||
/>
|
||
</ElementContainer>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|