Create TopBar

src/components/PageWrapper/PageWrapper.jsx

@@ -1,4 +1,5 @@
-import { XStack, styled } from "tamagui";
+import { XStack, YStack, styled } from "tamagui";
+import { TopBar } from "../TopBar";
 
 const Background = styled("div", {
   display: "flex",
@@ -10,22 +11,32 @@ const Background = styled("div", {
 const PageWrapper = ({ children }) => {
   return (
     <Background>
-      <XStack
-        space={"$8"}
+      <div
         style={{
-          background: "rgb(245,242,254)",
-          background:
-            "linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)",
-          borderRadius: "25px",
           border: "4px solid #09101C",
-          width: "100%",
-          display: "flex",
-          justifyContent: "end",
-          alignItems: "center",
+          "border-radius": "45px",
+          padding: "0",
+          margin: "0",
         }}
       >
-        {children}
-      </XStack>
+        <YStack>
+          <TopBar />
+          <XStack
+            space={"$8"}
+            style={{
+              background:
+                "linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)",
+
+              width: "100%",
+              display: "flex",
+              justifyContent: "end",
+              alignItems: "center",
+            }}
+          >
+            {children}
+          </XStack>
+        </YStack>
+      </div>
     </Background>
   );
 };

src/components/TopBar/TopBar.jsx

@@ -0,0 +1,101 @@
+//import { Image, XStack } from "tamagui";
+import RedDot from "/top-bar-icons/red.png";
+import YelloDot from "/top-bar-icons/yellow.png";
+import BlueDot from "/top-bar-icons/blue.png";
+import Arrow from "/top-bar-icons/chevron-left.png";
+import CommunitiesIcon from "/top-bar-icons/communities.png";
+import MessagesIcon from "/top-bar-icons/messages.png";
+import WalletIcon from "/top-bar-icons/wallet.png";
+import BrowserIcon from "/top-bar-icons/browser.png";
+import NodesIcon from "/top-bar-icons/nodes.png";
+import Rarible from "/top-bar-icons/Rarible.png";
+import User from "/top-bar-icons/user.png";
+import FullScreen from "/top-bar-icons/full-screen.png";
+import Bell from "/top-bar-icons/bell.png";
+
+import "./TopBar.css";
+import { ReactButton } from "../ReactButton";
+import { Button, Tabs, XStack } from "tamagui";
+import { Icon } from "../Icon";
+import { IconButton } from "../IconButton";
+import { Tab } from "./Tab";
+
+const TopBar = () => {
+  const bgIconBtn = {
+    border: "none",
+    "background-color": "#1d2738",
+    cursor: "pointer",
+    padding: "8px",
+    "border-radius": "5px",
+    display: "flex",
+    "align-items": "center",
+  };
+  return (
+    <XStack className="topbar">
+      <XStack className="topbar_left">
+        <div className="topbar_actions">
+          <Icon src={RedDot} alt=" " className="icon_btn" />
+          <Icon src={YelloDot} className="icon_btn"></Icon>
+          <Icon className="icon_btn" src={BlueDot}></Icon>
+        </div>
+        <Icon src={Arrow} width={32} height={32} style={bgIconBtn}></Icon>
+        <Icon
+          src={CommunitiesIcon}
+          width={32}
+          height={32}
+          style={bgIconBtn}
+        ></Icon>
+
+        <Icon
+          src={MessagesIcon}
+          width={32}
+          height={32}
+          style={bgIconBtn}
+        ></Icon>
+
+        <Icon src={WalletIcon} width={32} height={32} style={bgIconBtn}></Icon>
+        <Icon src={BrowserIcon} width={32} height={32} style={bgIconBtn}></Icon>
+        <Icon src={NodesIcon} width={32} height={32} style={bgIconBtn}></Icon>
+      </XStack>
+      <div className="topbar_middle">
+        {Array.from({ length: 9 }).map((e, i) => (
+          <Tab key={i} icon={Rarible} text={"Rarible"} />
+        ))}
+      </div>
+      <div className="topbar_right">
+        <ReactButton
+          style={{
+            border: "1px solid #1d2738",
+            backgroundColor: "transparent",
+            cursor: "pointer",
+            padding: "10px",
+            borderRadius: "5px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "15px",
+            color: "#fff",
+            fontWeight: "bold",
+          }}
+        >
+          <p>Jump to </p>
+        </ReactButton>
+        <button className="icon_btn">
+          <img src={FullScreen} alt=" " width="100%" />
+        </button>
+        <button className="icon_btn">
+          <div className="badge_top" />
+
+          <img src={Bell} alt=" " />
+        </button>
+        <button className="icon_btn">
+          <div className="badge_bottom" />
+
+          <img src={User} alt=" " />
+        </button>
+      </div>
+    </XStack>
+  );
+};
+
+export { TopBar };

src/components/TopBar/index.jsx

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

src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx

@@ -7,6 +7,7 @@ import { BackgroundImage } from "../../components/BackgroundImage";
 import { PageWrapper } from "../../components/PageWrapper";
 import { StatisticBoxes } from "./StatisticBoxes/StatisticBoxes";
 import { StatisticTexts } from "./StatisticTexts";
+import { TopBar } from "../../components/TopBar";
 
 const DeviceHealthCheck = () => {
   const continueHandler = (e) => {
@@ -14,43 +15,46 @@ const DeviceHealthCheck = () => {
   };
 
   return (
-    <PageWrapper>
-      <YStack space={"$3"}>
-        <Logo />
-        <Titles
-          title={"Device Health Check"}
-          subtitle={"Configure your device to start Staking on Nimbus"}
+    <>
+      <PageWrapper>
+        <YStack space={"$3"}>
+          <Logo />
+          <Titles
+            title={"Device Health Check"}
+            subtitle={"Configure your device to start Staking on Nimbus"}
+          />
+          <StatisticBoxes />
+          <StatisticTexts />
+          <InformationBox
+            icon="/icons/close.png"
+            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
+              color="#fff"
+              backgroundColor="#2A4AF5"
+              fontSize="$5"
+              size={"$3"}
+              onClick={continueHandler}
+            >
+              Continue
+            </ReactButton>
+          </XStack>
+        </YStack>
+
+        <BackgroundImage
+          style={{
+            background: "url(/background-images/eye-background.png) no-repeat",
+          }}
         />
-        <StatisticBoxes />
-        <StatisticTexts />
-        <InformationBox
-          icon="/icons/close.png"
-          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
-            color="#fff"
-            backgroundColor="#2A4AF5"
-            fontSize="$5"
-            size={"$3"}
-            onClick={continueHandler}
-          >
-            Continue
-          </ReactButton>
-        </XStack>
-      </YStack>
-      <BackgroundImage
-        style={{
-          background: "url(/background-images/eye-background.png) no-repeat",
-        }}
-      />
-    </PageWrapper>
+      </PageWrapper>
+    </>
   );
 };