[🏁 #2] Starter pack wizard (#4266)

* minimal landing page add a minimal gate remove overlap row add bg to avatar set implement basic mock up add header of mock add route * add navigation * create starter pack landing page * add state reducer * make value an array * implement state w/ steps * add back the flex * view header back button * add button text * add button text * add details screen * add button states * proper use of button * oops * rm extra state * use keyboard aware scrollview * rm log * remove some stuff * remove avatar from landing * add list for profiles * add profile card w/ button * add feeds * add processing state * support editing a pack * fix undefined error * add desktop props * add entire profile to state * scope the profile list better * scoping * add key extractor to feeds * add fab * add icon to details * changes * add dialog for adding profiles * remove log * rm unused iports * fix nav type
2024-06-02 18:14:08 -07:00
parent cb581bffd1
commit 30686702a6
18 changed files with 934 additions and 2 deletions
@@ -0,0 +1,58 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useProfileQuery} from 'state/queries/profile'
+import {useSession} from 'state/session'
+import {useWizardState} from '#/screens/StarterPack/Wizard/State'
+import {atoms as a} from '#/alf'
+import * as TextField from '#/components/forms/TextField'
+import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+
+export function StepDetails() {
+  const {_} = useLingui()
+  const [state, dispatch] = useWizardState()
+
+  const {currentAccount} = useSession()
+  const {data: currentProfile} = useProfileQuery({
+    did: currentAccount?.did,
+    staleTime: 300,
+  })
+
+  return (
+    <View style={[a.px_xl, a.gap_xl, a.mt_md]}>
+      <View style={[{height: 65, marginTop: 20, marginBottom: 50}]}>
+        <StarterPackIcon />
+      </View>
+      <View>
+        <TextField.LabelText>{_(msg`Starter pack name`)}</TextField.LabelText>
+        <TextField.Input
+          label={_(
+            msg`${
+              currentProfile?.displayName || currentProfile?.handle
+            }'s starter pack`,
+          )}
+          value={state.name}
+          onChangeText={text => dispatch({type: 'SetName', name: text})}
+        />
+      </View>
+      <View>
+        <TextField.LabelText>{_(msg`Description`)}</TextField.LabelText>
+        <TextField.Root>
+          <TextField.Input
+            label={_(
+              msg`Write a short description of your starter pack. What can new users expect?`,
+            )}
+            value={state.description}
+            onChangeText={text =>
+              dispatch({type: 'SetDescription', description: text})
+            }
+            multiline
+            style={{minHeight: 150}}
+          />
+        </TextField.Root>
+      </View>
+    </View>
+  )
+}