src/_UI/InputLabel/InputLabel.tsx (44 lines of code) (raw):
import { FC } from "react";
import { FormLabel, Flex, Tooltip, Text, Icon } from "@chakra-ui/react";
import { ReactComponent as Hint } from "@Assets/icons/stroke/harm-hint.svg";
type InputLabelProps = {
tooltipText: string;
label: string;
htmlFor: string;
required: boolean;
}
export const InputLabel: FC<InputLabelProps> = (props) => {
const { tooltipText, label, htmlFor, required } = props;
return (
<Flex
mb="8px"
align="center"
>
<Tooltip
label={tooltipText}
hasArrow
placement="right-start"
variant="light"
lineHeight="small"
>
<Icon
as={Hint}
mr="10px"
width="20px"
height="20px"
color="feedbackFormColor.hintIcon"
/>
</Tooltip>
<FormLabel
mr="2px"
mb="0px"
htmlFor={htmlFor}
fontSize={{ base: "small", lg: "medium" }}
lineHeight={{ base: "small", lg: "medium" }}
>
{ label }
</FormLabel>
{ required && (
<Text color="red">*</Text>
) }
</Flex>
);
};