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 { Logo } from "../../components/Logo";
import { InformationBox } from "../../components/InformationBox"; import { InformationBox } from "../../components/InformationBox";
import { Titles } from "../../components/Titles"; import { Titles } from "../../components/Titles";
import { IconText } from "../../components/IconText/IconText";
const DeviceHealthCheck = () => { const DeviceHealthCheck = () => {
return ( return (
@ -13,6 +14,26 @@ const DeviceHealthCheck = () => {
title={"Device Health Check"} title={"Device Health Check"}
subtitle={"Configure your device to start Staking on Nimbus"} 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 <InformationBox
icon="/icons/close.png" icon="/icons/close.png"
text="The information provided in the Nodes Health Check is meant to 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 please do your own due diligence prior to commiting any funds. Read
our Health Check Disclosure for more information." our Health Check Disclosure for more information."
/> />
<ReactButton color="#fff" backgroundColor="#2A4AF5" fontSize="$5"> <XStack>
Continue <ReactButton color="#fff" backgroundColor="#2A4AF5" fontSize="$5">
</ReactButton> Continue
</ReactButton>
</XStack>
</YStack> </YStack>
<Image <Image
source={{ source={{