fix onboarding on web

1 files changed, 40 insertions, 0 deletions

diff --git a/src/view/com/modals/OnboardingModal.tsx b/src/view/com/modals/OnboardingModal.tsx
new file mode 100644
index 000000000..3862736cf
--- /dev/null
+++ b/src/view/com/modals/OnboardingModal.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {useStores} from 'state/index'
+
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
+import {Welcome} from '../auth/onboarding/Welcome'
+import {observer} from 'mobx-react-lite'
+import {RecommendedFeeds} from '../auth/onboarding/RecommendedFeeds'
+
+export const snapPoints = ['90%']
+
+export const Component = observer(({}: {}) => {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  const next = () => {
+    const nextScreenName = store.onboarding.next()
+    if (nextScreenName === 'Home') {
+      store.shell.closeModal()
+    }
+  }
+
+  return (
+    <View style={[styles.container, pal.view]} testID="onboardingModal">
+      {store.onboarding.step === 'Welcome' ? <Welcome next={next} /> : null}
+      {store.onboarding.step === 'RecommendedFeeds' ? (
+        <RecommendedFeeds next={next} />
+      ) : null}
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingBottom: isDesktopWeb ? 0 : 50,
+    maxHeight: '750px',
+  },
+})