Break up new profile card for easier re-use

This commit is contained in:
Eric Bailey
2024-06-24 17:17:23 -05:00
parent f6b138f709
commit 37b53ae95a
+27 -7
View File
@@ -10,10 +10,30 @@ import {FollowButton} from 'view/com/profile/FollowButton'
import {ProfileCardPills} from 'view/com/profile/ProfileCard' import {ProfileCardPills} from 'view/com/profile/ProfileCard'
import {UserAvatar} from 'view/com/util/UserAvatar' import {UserAvatar} from 'view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Link} from '#/components/Link' import {Link as InternalLink, LinkProps} from '#/components/Link'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
export function Default({ export function Default({
profile,
moderationOpts,
logContext = 'ProfileCard',
}: {
profile: AppBskyActorDefs.ProfileViewDetailed
moderationOpts: ModerationOpts
logContext?: 'ProfileCard' | 'StarterPackProfilesList'
}) {
return (
<Link did={profile.did}>
<Card
profile={profile}
moderationOpts={moderationOpts}
logContext={logContext}
/>
</Link>
)
}
export function Card({
profile: profileUnshadowed, profile: profileUnshadowed,
moderationOpts, moderationOpts,
logContext = 'ProfileCard', logContext = 'ProfileCard',
@@ -31,7 +51,7 @@ export function Default({
const moderation = moderateProfile(profile, moderationOpts) const moderation = moderateProfile(profile, moderationOpts)
return ( return (
<Wrapper did={profile.did}> <View style={[a.flex_1, a.gap_xs]}>
<View style={[a.flex_row, a.gap_sm]}> <View style={[a.flex_row, a.gap_sm]}>
<UserAvatar <UserAvatar
size={42} size={42}
@@ -74,18 +94,18 @@ export function Default({
{profile.description} {profile.description}
</Text> </Text>
)} )}
</Wrapper> </View>
) )
} }
function Wrapper({did, children}: {did: string; children: React.ReactNode}) { export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
return ( return (
<Link <InternalLink
to={{ to={{
screen: 'Profile', screen: 'Profile',
params: {name: did}, params: {name: did},
}}> }}>
<View style={[a.flex_1, a.gap_xs]}>{children}</View> {children}
</Link> </InternalLink>
) )
} }