diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
new file mode 100644
index 0000000000..d3b1b39dd2
--- /dev/null
+++ b/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 (
+
+
+
+
+ {name}
+
+ {handle}
+
+
+
+ {profile.description && (
+ {profile.description}
+ )}
+
+ )
+}
+
+function Wrapper({did, children}: {did: string; children: React.ReactNode}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx
index 9b122b820f..c79748f1ca 100644
--- a/src/screens/StarterPack/StarterPackLandingScreen.tsx
+++ b/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({
) : null}
- {Boolean(sampleProfiles?.length) && (
+ {Boolean(listItemsSample?.length) && (
{feeds?.length ? (
@@ -227,20 +226,20 @@ function LandingScreenInner({
>
)}
-
- {starterPack.listItemsSample?.map(item => (
-
- ))}
+
+ {starterPack.listItemsSample
+ ?.slice(0, 8)
+ .map((item, index) => (
+
+
+
+ ))}
)}