feat: add user profile example (#4)

Author: colepeters

sdk-explorer/src/App.tsx

@@ -1,11 +1,12 @@
 import { SanityMonogram } from '@sanity/logos'
 import { AuthBoundary } from '@sanity/sdk-react/components'
 import { useAuthState, useLogOut } from '@sanity/sdk-react/hooks'
-import { Button, Card, Flex, Text } from '@sanity/ui'
+import { Button, Card, Flex, Inline, Text } from '@sanity/ui'
 import { BrowserRouter, Link, Route, Routes } from 'react-router'
 import PreviewGrid from './document-collections/PreviewGrid/PreviewGrid'
 import PreviewList from './document-collections/PreviewList/PreviewList'
 import Home from './Home'
+import UserProfile from './users/UserProfile/UserProfile'
 
 export default function App() {
   const authState = useAuthState()
@@ -39,9 +40,16 @@ export default function App() {
                 </Flex>
               </Link>
             </Text>
-            {authState?.type === 'logged-in' && (
-              <Button mode='ghost' text='Log out' onClick={logOut} />
-            )}
+            <Inline space={4}>
+              <Link to='/'>
+                <Text weight='medium' size={1}>
+                  Home
+                </Text>
+              </Link>
+              {authState?.type === 'logged-in' && (
+                <Button mode='ghost' text='Log out' onClick={logOut} />
+              )}
+            </Inline>
           </Flex>
         </Card>
         <AuthBoundary>
@@ -55,6 +63,7 @@ export default function App() {
               path='/document-collections/preview-grid'
               element={<PreviewGrid />}
             />
+            <Route path='/users/user-profile' element={<UserProfile />} />
           </Routes>
         </AuthBoundary>
       </Card>

sdk-explorer/src/Home.tsx

@@ -47,6 +47,24 @@ export default function Home() {
             </Stack>
           </Stack>
         </Card>
+
+        <Card padding={4} radius={2} shadow={3}>
+          <Stack space={4}>
+            <Text as='h2' size={4} weight='medium'>
+              Users
+            </Text>
+
+            <Stack space={3}>
+              <ExampleCard
+                to='/users/user-profile'
+                title='User profile'
+                description='Information about the currently authenticated user'
+                hooks={['useAuthState', 'useCurrentUser']}
+                styling='Sanity UI'
+              />
+            </Stack>
+          </Stack>
+        </Card>
       </Stack>
     </Container>
   )

sdk-explorer/src/users/UserProfile/UserProfile.tsx

@@ -0,0 +1,45 @@
+import { AuthStateType } from '@sanity/sdk'
+import { useAuthState, useCurrentUser } from '@sanity/sdk-react/hooks'
+import { Avatar, Card, Container, Flex, Grid, Stack, Text } from '@sanity/ui'
+
+export default function UserProfile() {
+  const { type } = useAuthState()
+  const user = useCurrentUser()
+
+  return type === AuthStateType.LOGGED_IN && user ? (
+    <Container width={1}>
+      <Card padding={4} margin={2} radius={3} shadow={3}>
+        <Flex justify='center' marginBottom={5}>
+          <Avatar src={user?.profileImage} size={3} />
+        </Flex>
+        <Text as='h2' size={4} weight='medium' align='center'>
+          {user?.name}
+        </Text>
+        <Stack space={3} marginTop={5} marginBottom={4}>
+          <Grid columns={2} gap={4} as='dl'>
+            <Text as='dt' align='right' muted>
+              Email address
+            </Text>
+            <Text as='dd'>{user?.email}</Text>
+            <Text as='dt' align='right' muted>
+              Roles
+            </Text>
+            <Text as='dd'>
+              {user?.roles.map((role) => role.title).join(', ')}
+            </Text>
+            <Text as='dt' align='right' muted>
+              Provider
+            </Text>
+            <Text as='dd'>{user?.provider}</Text>
+          </Grid>
+        </Stack>
+      </Card>
+    </Container>
+  ) : (
+    <Container padding={5}>
+      <Text as='h2' size={4} align='center'>
+        Nobody home! Try logging in?
+      </Text>
+    </Container>
+  )
+}