39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { FormControl, FormErrorMessage, FormLabel, Icon, InputGroup, InputProps, Tooltip, Text } from "@chakra-ui/react";
|
|
import React from "react";
|
|
import { TbHelp } from "react-icons/tb";
|
|
|
|
export interface SettingsItemProps extends InputProps {
|
|
label: string;
|
|
help?: string;
|
|
error?: string;
|
|
element: React.ReactNode;
|
|
leftElement?: React.ReactNode;
|
|
rightElement?: React.ReactNode;
|
|
}
|
|
|
|
export const SettingsItem: React.FC<SettingsItemProps> =
|
|
({ label, help, error, element, leftElement, rightElement }) => {
|
|
console.log(label, error);
|
|
return (
|
|
<FormControl isInvalid={error ? true : false}>
|
|
<FormLabel>
|
|
{label}{' '}
|
|
{help && (
|
|
<Tooltip hasArrow label={help}>
|
|
<Text as="span">
|
|
<Icon as={TbHelp}></Icon>
|
|
</Text>
|
|
</Tooltip>
|
|
)}
|
|
</FormLabel>
|
|
<InputGroup>
|
|
{leftElement}
|
|
{element}
|
|
{rightElement}
|
|
</InputGroup>
|
|
{error && <FormErrorMessage>{error}</FormErrorMessage>}
|
|
</FormControl>
|
|
);
|
|
}
|
|
;
|