Create and use new formatted text component
This commit is contained in:
parent
a7b51d46b0
commit
b18d6e4e9c
|
@ -0,0 +1,27 @@
|
|||
import { Text } from "tamagui";
|
||||
|
||||
const FormattedText = ({ textElements, color, fontSize }) => {
|
||||
return (
|
||||
<Text color={color} fontSize={fontSize}>
|
||||
{textElements.map((textElement, index) => {
|
||||
if (textElement.bold) {
|
||||
return (
|
||||
<span key={index} style={{ fontWeight: "bold" }}>
|
||||
{textElement.bold}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (textElement.italic) {
|
||||
return (
|
||||
<span key={index} style={{ fontStyle: "italic" }}>
|
||||
{textElement.italic}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span key={index}>{textElement.text}</span>;
|
||||
})}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
export { FormattedText };
|
|
@ -0,0 +1 @@
|
|||
export { FormattedText } from "./FormattedText";
|
|
@ -1,7 +1,8 @@
|
|||
import { Paragraph, XStack } from "tamagui";
|
||||
import { XStack } from "tamagui";
|
||||
import { Icon } from "../Icon";
|
||||
import { FormattedText } from "../FormattedText";
|
||||
|
||||
const InformationBox = ({ icon, text }) => {
|
||||
const InformationBox = ({ icon, textElements }) => {
|
||||
return (
|
||||
<XStack
|
||||
style={{
|
||||
|
@ -14,7 +15,11 @@ const InformationBox = ({ icon, text }) => {
|
|||
space={"$2"}
|
||||
>
|
||||
<Icon source={icon} width={12} height={12} style={{ marginTop: "6px" }} />
|
||||
<Paragraph color={"#647084"}>{text}</Paragraph>
|
||||
<FormattedText
|
||||
textElements={textElements}
|
||||
color={"#647084"}
|
||||
fontSize={"$3"}
|
||||
/>
|
||||
</XStack>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -3,7 +3,6 @@ import { ReactButton } from "../../components/ReactButton";
|
|||
import { Logo } from "../../components/Logo";
|
||||
import { InformationBox } from "../../components/InformationBox";
|
||||
import { Titles } from "../../components/Titles";
|
||||
import { IconText } from "../../components/IconText/IconText";
|
||||
import { BackgroundImage } from "../../components/BackgroundImage";
|
||||
import { PageWrapper } from "../../components/PageWrapper";
|
||||
import { StatisticBoxes } from "./StatisticBoxes/StatisticBoxes";
|
||||
|
@ -26,10 +25,13 @@ const DeviceHealthCheck = () => {
|
|||
<StatisticTexts />
|
||||
<InformationBox
|
||||
icon="/icons/close.png"
|
||||
text="The information provided in the Nodes Health Check is meant to
|
||||
utilized as a guide to guage the readiness of your device, however
|
||||
please do your own due diligence prior to commiting any funds. Read
|
||||
our Health Check Disclosure for more information."
|
||||
textElements={[
|
||||
{
|
||||
text: "The information provided in the Nodes Health Check is meant to be utilized as a guide to gauge the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our ",
|
||||
},
|
||||
{ bold: "Health Check Disclosure" },
|
||||
{ text: " for more information." },
|
||||
]}
|
||||
/>
|
||||
<XStack>
|
||||
<ReactButton
|
||||
|
|
Loading…
Reference in New Issue