mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-01-22 01:09:49 +00:00
Create and use icon with text component
This commit is contained in:
parent
bd6f8b19ab
commit
1ac9fd3e56
17
src/components/IconText/IconText.jsx
Normal file
17
src/components/IconText/IconText.jsx
Normal 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 };
|
1
src/components/IconText/index.jsx
Normal file
1
src/components/IconText/index.jsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { IconText } from "./IconText";
|
@ -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={{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user