Create and use icon with text component

This commit is contained in:
RadoslavDimchev 2023-07-21 17:54:59 +03:00
parent bd6f8b19ab
commit 1ac9fd3e56
3 changed files with 44 additions and 3 deletions

View File

@ -0,0 +1,17 @@
import { Image, Paragraph, XStack } from "tamagui";
const IconText = ({ icon, text }) => {
return (
<XStack
style={{
alignItems: "center",
}}
space={"$3"}
>
<Image source={{ uri: icon }} width={16} height={16} />
<Paragraph color={"#000000"}>{text}</Paragraph>
</XStack>
);
};
export { IconText };

View File

@ -0,0 +1 @@
export { IconText } from "./IconText";

View File

@ -3,6 +3,7 @@ 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";
const DeviceHealthCheck = () => {
return (
@ -13,6 +14,26 @@ const DeviceHealthCheck = () => {
title={"Device Health Check"}
subtitle={"Configure your device to start Staking on Nimbus"}
/>
<YStack space={"$2"}>
<IconText
icon={"/icons/remove-circle-red.png"}
text={
"Your storage is running low as required for additional node services."
}
/>
<IconText
icon={"/icons/checkmark-circle-green.png"}
text={"2.4GHz is recommended for CPU."}
/>
<IconText
icon={"/icons/checkmark-circle-green.png"}
text={"There is sufficient ram required for selected services."}
/>
<IconText
icon={"/icons/checkmark-circle-blue.png"}
text={"Network Latency is low."}
/>
</YStack>
<InformationBox
icon="/icons/close.png"
text="The information provided in the Nodes Health Check is meant to
@ -20,9 +41,11 @@ const DeviceHealthCheck = () => {
please do your own due diligence prior to commiting any funds. Read
our Health Check Disclosure for more information."
/>
<ReactButton color="#fff" backgroundColor="#2A4AF5" fontSize="$5">
Continue
</ReactButton>
<XStack>
<ReactButton color="#fff" backgroundColor="#2A4AF5" fontSize="$5">
Continue
</ReactButton>
</XStack>
</YStack>
<Image
source={{