Integrate profile listings into design system
parent
10f613475a
commit
9084e0e4a8
|
@ -3,26 +3,26 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
|||
import {Link} from '../util/Link'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {s} from '../../lib/styles'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
|
||||
export function ProfileCard({
|
||||
did,
|
||||
handle,
|
||||
displayName,
|
||||
avatar,
|
||||
renderButton,
|
||||
onPressButton,
|
||||
}: {
|
||||
did: string
|
||||
handle: string
|
||||
displayName?: string
|
||||
avatar?: string
|
||||
renderButton?: () => JSX.Element
|
||||
onPressButton?: () => void
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<Link
|
||||
style={styles.outer}
|
||||
style={[styles.outer, pal.view, pal.border]}
|
||||
href={`/profile/${handle}`}
|
||||
title={handle}
|
||||
noFeedback>
|
||||
|
@ -36,16 +36,18 @@ export function ProfileCard({
|
|||
/>
|
||||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<Text style={[s.f16, s.bold, s.black]} numberOfLines={1}>
|
||||
<Text style={[s.bold, pal.text]} numberOfLines={1}>
|
||||
{displayName || handle}
|
||||
</Text>
|
||||
<Text style={[s.f15, s.gray5]} numberOfLines={1}>
|
||||
<Text type="body2" style={[pal.textLight]} numberOfLines={1}>
|
||||
@{handle}
|
||||
</Text>
|
||||
</View>
|
||||
{renderButton ? (
|
||||
<View style={styles.layoutButton}>
|
||||
<TouchableOpacity onPress={onPressButton} style={styles.btn}>
|
||||
<TouchableOpacity
|
||||
onPress={onPressButton}
|
||||
style={[styles.btn, pal.btn]}>
|
||||
{renderButton()}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
@ -57,9 +59,7 @@ export function ProfileCard({
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
marginTop: 1,
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 6,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
|
@ -93,7 +93,6 @@ const styles = StyleSheet.create({
|
|||
paddingVertical: 7,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 50,
|
||||
backgroundColor: colors.gray1,
|
||||
marginLeft: 6,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -11,6 +11,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
|
|||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {useStores} from '../../../state'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
|
||||
export const ProfileFollowers = observer(function ProfileFollowers({
|
||||
name,
|
||||
|
@ -80,9 +81,10 @@ export const ProfileFollowers = observer(function ProfileFollowers({
|
|||
})
|
||||
|
||||
const User = ({item}: {item: FollowerItem}) => {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<Link
|
||||
style={styles.outer}
|
||||
style={[styles.outer, pal.view, pal.border]}
|
||||
href={`/profile/${item.handle}`}
|
||||
title={item.handle}
|
||||
noFeedback>
|
||||
|
@ -96,10 +98,12 @@ const User = ({item}: {item: FollowerItem}) => {
|
|||
/>
|
||||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<Text style={[s.f15, s.bold, s.black]}>
|
||||
<Text style={[s.bold, pal.text]}>
|
||||
{item.displayName || item.handle}
|
||||
</Text>
|
||||
<Text style={[s.f14, s.gray5]}>@{item.handle}</Text>
|
||||
<Text type="body2" style={[pal.textLight]}>
|
||||
@{item.handle}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Link>
|
||||
|
@ -108,8 +112,7 @@ const User = ({item}: {item: FollowerItem}) => {
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
marginTop: 1,
|
||||
backgroundColor: colors.white,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
|
|
|
@ -11,6 +11,7 @@ import {Text} from '../util/text/Text'
|
|||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
|
||||
export const ProfileFollows = observer(function ProfileFollows({
|
||||
name,
|
||||
|
@ -80,9 +81,10 @@ export const ProfileFollows = observer(function ProfileFollows({
|
|||
})
|
||||
|
||||
const User = ({item}: {item: FollowItem}) => {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<Link
|
||||
style={styles.outer}
|
||||
style={[styles.outer, pal.view, pal.border]}
|
||||
href={`/profile/${item.handle}`}
|
||||
title={item.handle}
|
||||
noFeedback>
|
||||
|
@ -96,10 +98,12 @@ const User = ({item}: {item: FollowItem}) => {
|
|||
/>
|
||||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<Text style={[s.f15, s.bold, s.black]}>
|
||||
<Text style={[s.bold, pal.text]}>
|
||||
{item.displayName || item.handle}
|
||||
</Text>
|
||||
<Text style={[s.f14, s.gray5]}>@{item.handle}</Text>
|
||||
<Text type="body2" style={pal.textLight}>
|
||||
@{item.handle}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Link>
|
||||
|
@ -108,8 +112,7 @@ const User = ({item}: {item: FollowItem}) => {
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
marginTop: 1,
|
||||
backgroundColor: colors.white,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
|
|
|
@ -74,13 +74,13 @@ export const ViewHeader = observer(function ViewHeader({
|
|||
)}
|
||||
</TouchableOpacity>
|
||||
<View style={styles.titleContainer} pointerEvents="none">
|
||||
<Text type="h3" style={pal.text}>
|
||||
<Text type="h4" style={pal.text}>
|
||||
{title}
|
||||
</Text>
|
||||
{subtitle ? (
|
||||
<Text
|
||||
type="h4"
|
||||
style={[styles.subtitle, pal.textLight]}
|
||||
type="h5"
|
||||
style={[styles.subtitle, pal.textLight, {fontWeight: 'normal'}]}
|
||||
numberOfLines={1}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
|
@ -147,7 +147,7 @@ const styles = StyleSheet.create({
|
|||
marginRight: 'auto',
|
||||
},
|
||||
subtitle: {
|
||||
marginLeft: 6,
|
||||
marginLeft: 4,
|
||||
maxWidth: 200,
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue