feat: add initial components to the page

src/App.tsx

@@ -7,6 +7,7 @@ import LandingPage from './pages/LandingPage/LandingPage'
 import DeviceHealthCheck from './pages/DeviceHealthCheck/DeviceHealthCheck'
 import ConnectDevicePage from './pages/ConnectDevicePage/ConnectDevicePage'
 import DeviceSyncStatus from './pages/DeviceSyncStatus/DeviceSyncStatus'
+import PairDevice from './pages/PairDevice/PairDevice'
 
 const router = createBrowserRouter([
   {
@@ -27,7 +28,7 @@ const router = createBrowserRouter([
   },
   {
     path: '/pair-device',
-    element: <DeviceSyncStatus />,
+    element: <PairDevice />,
   },
 ])
 

src/pages/PairDevice/PairDevice.js

@@ -1,3 +0,0 @@
-const PairDevice = () => {}
-
-export default PairDevice

src/pages/PairDevice/PairDevice.tsx

@@ -0,0 +1,17 @@
+import { YStack } from 'tamagui'
+import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
+
+const PairDevice = () => {
+  return (
+    <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
+      <YStack
+        space={'$4'}
+        style={{
+          maxWidth: '100%',
+        }}
+      ></YStack>
+    </PageWrapperShadow>
+  )
+}
+
+export default PairDevice