add helper text and tooltip for secret path

This commit is contained in:
JanetEne
2023-09-09 04:06:16 +01:00
parent bf95415a0d
commit dc91615b43
3 changed files with 59 additions and 7 deletions
@@ -8,12 +8,17 @@ export type FormLabelProps = {
id?: string;
isRequired?: boolean;
label?: ReactNode;
icon?: ReactNode;
};
export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
<Label.Root className="mb-0.5 ml-1 block text-sm font-normal text-mineshaft-400" htmlFor={id}>
export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
<Label.Root
className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
htmlFor={id}
>
{label}
{isRequired && <span className="ml-1 text-red">*</span>}
{icon && <span className="ml-2 cursor-pointer text-white">{icon}</span>}
</Label.Root>
);
@@ -47,6 +52,7 @@ export type FormControlProps = {
errorText?: ReactNode;
children: JSX.Element;
className?: string;
icon?: ReactNode;
};
export const FormControl = ({
@@ -57,12 +63,13 @@ export const FormControl = ({
errorText,
id,
isError,
icon,
className
}: FormControlProps): JSX.Element => {
return (
<div className={twMerge("mb-4", className)}>
{typeof label === "string" ? (
<FormLabel label={label} isRequired={isRequired} id={id} />
<FormLabel label={label} isRequired={isRequired} id={id} icon={icon} />
) : (
label
)}