phone input screen

src/components/contacts/SyncContactsFlow.tsx

@@ -1,13 +1,22 @@
 import {useState} from 'react'
 
 import {ScreenTransition} from '#/components/ScreenTransition'
+import {GetContacts} from './screens/GetContacts'
+import {PhoneInput} from './screens/PhoneInput'
+import {VerifyNumber} from './screens/VerifyNumber'
+import {ViewMatches} from './screens/ViewMatches'
 import {type Action, type State} from './state'
 
 export function SyncContactsFlow({
   state,
+  dispatch,
+  onSkip,
+  context = 'Standalone',
 }: {
   state: State
   dispatch: React.Dispatch<Action>
+  onSkip: () => void
+  context: 'Onboarding' | 'Standalone'
 }) {
   const [transitionDirection, _setTransitionDirection] = useState<
     'Forward' | 'Backward'
@@ -15,7 +24,23 @@ export function SyncContactsFlow({
 
   return (
     <ScreenTransition direction={transitionDirection} key={state.step}>
-      <></>
+      {state.step === '1: phone input' && (
+        <PhoneInput
+          state={state}
+          dispatch={dispatch}
+          showSkipButton={context === 'Onboarding'}
+          onSkip={onSkip}
+        />
+      )}
+      {state.step === '2: verify number' && (
+        <VerifyNumber state={state} dispatch={dispatch} />
+      )}
+      {state.step === '3: get contacts' && (
+        <GetContacts state={state} dispatch={dispatch} />
+      )}
+      {state.step === '4: view matches' && (
+        <ViewMatches state={state} dispatch={dispatch} />
+      )}
     </ScreenTransition>
   )
 }