From f089f4578131e83cd177b7809ce0f7b75779dfdc Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 21 Jun 2024 21:38:04 -0700
Subject: Starter Packs (#4332)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 src/components/ProfileCard.tsx | 91 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/components/ProfileCard.tsx

(limited to 'src/components/ProfileCard.tsx')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
new file mode 100644
index 000000000..a0d222854
--- /dev/null
+++ b/src/components/ProfileCard.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
+
+import {createSanitizedDisplayName} from 'lib/moderation/create-sanitized-display-name'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {useProfileShadow} from 'state/cache/profile-shadow'
+import {useSession} from 'state/session'
+import {FollowButton} from 'view/com/profile/FollowButton'
+import {ProfileCardPills} from 'view/com/profile/ProfileCard'
+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: profileUnshadowed,
+  moderationOpts,
+  logContext = 'ProfileCard',
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  moderationOpts: ModerationOpts
+  logContext?: 'ProfileCard' | 'StarterPackProfilesList'
+}) {
+  const t = useTheme()
+  const {currentAccount, hasSession} = useSession()
+
+  const profile = useProfileShadow(profileUnshadowed)
+  const name = createSanitizedDisplayName(profile)
+  const handle = `@${sanitizeHandle(profile.handle)}`
+  const moderation = moderateProfile(profile, moderationOpts)
+
+  return (
+    <Wrapper did={profile.did}>
+      <View style={[a.flex_row, a.gap_sm]}>
+        <UserAvatar
+          size={42}
+          avatar={profile.avatar}
+          type={
+            profile.associated?.labeler
+              ? 'labeler'
+              : profile.associated?.feedgens
+              ? 'algo'
+              : 'user'
+          }
+          moderation={moderation.ui('avatar')}
+        />
+        <View style={[a.flex_1]}>
+          <Text
+            style={[a.text_md, a.font_bold, a.leading_snug]}
+            numberOfLines={1}>
+            {name}
+          </Text>
+          <Text
+            style={[a.leading_snug, t.atoms.text_contrast_medium]}
+            numberOfLines={1}>
+            {handle}
+          </Text>
+        </View>
+        {hasSession && profile.did !== currentAccount?.did && (
+          <View style={[a.justify_center, {marginLeft: 'auto'}]}>
+            <FollowButton profile={profile} logContext={logContext} />
+          </View>
+        )}
+      </View>
+      <View style={[a.mb_xs]}>
+        <ProfileCardPills
+          followedBy={Boolean(profile.viewer?.followedBy)}
+          moderation={moderation}
+        />
+      </View>
+      {profile.description && (
+        <Text numberOfLines={3} style={[a.leading_snug]}>
+          {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_xs]}>{children}</View>
+    </Link>
+  )
+}
-- 
cgit 1.4.1