Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 356x 356x 356x 1x 1x 222x 1x 3x | import styled from "styled-components";
import { ReactElement, ReactNode } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export enum InfoTextVariant {
INFO = "infoColor",
WARNING = "warningColor",
}
interface Props {
children: ReactNode;
variant?: InfoTextVariant;
className?: string;
}
export const InfoText = ({
children,
variant,
className,
}: Props): ReactElement => (
<p className={className}>
<Container $variant={variant ?? InfoTextVariant.INFO}>
{variant === InfoTextVariant.WARNING && (
<StyledIcon $variant={variant} icon={"triangle-exclamation"} />
)}
{children}
</Container>
</p>
);
const Container = styled.span<{
$variant: InfoTextVariant;
}>`
display: inline-block;
padding: 8px 6px;
border-radius: 5px;
${(props) =>
`
border: 1px solid ${props.theme[props.$variant]};
background-color: ${props.theme[`${props.$variant}Background`]};
`}
`;
const StyledIcon = styled(FontAwesomeIcon)<{
$variant: InfoTextVariant.WARNING;
}>`
padding-right: 8px;
${(props) =>
`
color: ${props.theme[`${props.$variant}Icon`]};
`}
`;
|