Create and use icon with text component
This commit is contained in:
parent
bd6f8b19ab
commit
1ac9fd3e56
|
@ -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 };
|
|
@ -0,0 +1 @@
|
|||
export { IconText } from "./IconText";
|
|
@ -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={{
|
||||
|
|
Loading…
Reference in New Issue