technology logo
technology logo

State View Text

share link

by interstellarcg dot icon Updated: Nov 24, 2022

Guide Kit Guide Kit  

const StateViewText: React.FC<{
  children: React.ReactNode;
  type?: "success" | "error" | "normal" | "warning";
  textProps?: TextProps;
}> = ({ children, type }) => {
  const colorScheme = useColorScheme();
  return (
    <Text
      style={{
        fontSize: fontSizes.xs,
        color:
          type === "success"
            ? Colors[colorScheme].success
            : type === "error"
            ? Colors[colorScheme].error
            : type === "warning"
            ? Colors[colorScheme].warning
            : Colors[colorScheme].text,
        fontFamily: fonts.Regular,
      }}
    >
      {children}
    </Text>
  );
};