tweak landing

src/components/ProfileCard.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyActorDefs} from '@atproto/api'
+
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {atoms as a, useTheme} from '#/alf'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function Default({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+}) {
+  const t = useTheme()
+
+  const handle = `@${sanitizeHandle(profile.handle)}`
+  const name =
+    profile.displayName != null && profile.displayName !== ''
+      ? sanitizeDisplayName(profile.displayName)
+      : handle
+
+  return (
+    <Wrapper did={profile.did}>
+      <View style={[a.flex_row, a.gap_sm]}>
+        <UserAvatar
+          size={42}
+          avatar={profile.avatar}
+          type={profile.associated?.labeler ? 'algo' : 'user'}
+        />
+        <View>
+          <Text style={[a.text_md, a.font_bold, a.leading_snug]}>{name}</Text>
+          <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
+            {handle}
+          </Text>
+        </View>
+      </View>
+      {profile.description && (
+        <Text numberOfLines={3}>{profile.description}</Text>
+      )}
+    </Wrapper>
+  )
+}
+
+function Wrapper({did, children}: {did: string; children: React.ReactNode}) {
+  return (
+    <Link
+      to={{
+        screen: 'Profile',
+        params: {name: did},
+      }}>
+      <View style={[a.flex_1, a.gap_md]}>{children}</View>
+    </Link>
+  )
+}

src/screens/StarterPack/StarterPackLandingScreen.tsx

@@ -12,7 +12,6 @@ import {
 import {useResolveDidQuery} from 'state/queries/resolve-uri'
 import {useStarterPackQuery} from 'state/queries/useStarterPackQuery'
 import {LoggedOutScreenState} from 'view/com/auth/LoggedOut'
-import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {CenteredView} from 'view/com/util/Views'
 import {Logo} from 'view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
@@ -21,6 +20,7 @@ import {Divider} from '#/components/Divider'
 import * as FeedCard from '#/components/FeedCard'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {ListMaybePlaceholder} from '#/components/Lists'
+import {Default as ProfileCardInner} from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
 
 function parseStarterPackHttpUri(uri: string): {name?: string; rkey?: string} {
@@ -93,7 +93,6 @@ function LandingScreenInner({
   const {isTabletOrDesktop} = useWebMediaQueries()
 
   const listItemsCount = starterPack.list?.listItemCount ?? 0
-  const sampleProfiles = listItemsSample?.map(item => item.subject)
 
   if (!AppBskyGraphStarterpack.isRecord(record)) {
     return null
@@ -197,7 +196,7 @@ function LandingScreenInner({
               </View>
             ) : null}
 
-            {Boolean(sampleProfiles?.length) && (
+            {Boolean(listItemsSample?.length) && (
               <View style={[a.gap_md]}>
                 <Text style={[a.font_bold, a.text_lg]}>
                   {feeds?.length ? (
@@ -227,20 +226,20 @@ function LandingScreenInner({
                     </>
                   )}
                 </Text>
-                <View
+                <View style={[t.atoms.bg_contrast_25, a.rounded_sm]}>
-                  style={[
+                  {starterPack.listItemsSample
-                    t.atoms.bg_contrast_25,
+                    ?.slice(0, 8)
-                    a.rounded_sm,
+                    .map((item, index) => (
-                    a.px_xs,
+                      <View
-                    a.py_md,
+                        key={item.subject.did}
-                    a.gap_xl,
+                        style={[
-                  ]}>
+                          a.p_lg,
-                  {starterPack.listItemsSample?.map(item => (
+                          index !== 0 && a.border_t,
-                    <ProfileCard
+                          t.atoms.border_contrast_low,
-                      profile={item.subject}
+                        ]}>
-                      key={item.subject.did}
+                        <ProfileCardInner profile={item.subject} />
-                    />
+                      </View>
-                  ))}
+                    ))}
                 </View>
               </View>
             )}