39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { cn } from './utils';
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva } from 'class-variance-authority';
|
|
import { forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react';
|
|
|
|
export type ContainerProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren;
|
|
|
|
const variants = cva('flex min-h-[36px] items-center', {
|
|
defaultVariants: {
|
|
intent: 'default',
|
|
},
|
|
variants: {
|
|
intent: {
|
|
danger: '[&>*]:border-red-500 [&>*>*]:border-red-500',
|
|
default: '',
|
|
},
|
|
},
|
|
});
|
|
|
|
export type WrapperProps = HTMLAttributes<HTMLDivElement> &
|
|
VariantProps<typeof variants> & { readonly message?: string };
|
|
|
|
export const ElementContainer = forwardRef<HTMLDivElement, WrapperProps>(
|
|
({ children, className, id, intent, message = 'Некорректные данные', title, ...props }, ref) => (
|
|
<div {...props} className="flex flex-col justify-center" ref={ref} {...props}>
|
|
<label
|
|
htmlFor={id}
|
|
className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"
|
|
>
|
|
{title}
|
|
</label>
|
|
<div className={cn(variants({ className, intent }))}>{children}</div>
|
|
<div className="mt-1 text-xs text-red-500 transition-all ease-in-out">
|
|
{intent === 'danger' ? message : <div className="my-4" />}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|