I am facing an issue with a reusable component that is supposed to handle two different states based on the use case. The problem arises when trying to apply CSS styles depending on which state is provided. For some reason, it only applies the styles from the "status" state and completely ignores the condition for the "isVerified" state. I am using Chakra UI.
type Props = {
isVerified?: boolean;
status?: "active" | "inactive" | undefined;
};
export const TestIcon = ({
status,
isVerified,
}: Props): ReactElement => {
return (
<Icon
backgroundColor={
(status === "active" ? "green.50" : "dark.50") ||
(isVerified ? "dark.800" : "dark.50")
}
borderRadius="full"
boxSize="illustrationSize"
fill={
(status === "active" ? "green.500" : "dark.200") ||
(isVerified ? "base.white" : "dark.200")
}
/>
);
};