zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[D1X] Add interstitials, component tweaks, placeholders (#4697)

Browse source 
* Add interstitials, component tweaks, placeholders

* Tweak feed card styles

* Port over same fix to ProfileCard

* Add browse more link on desktop

* Rm Gemfile

* Update logContext

* Update logContext

* Add click metric to cards

* Pass through props to ProfileCard.Link

* 2-up grid for profile cards on desktop web

* Add secondary_inverted button color

* Use inverted button color

* Adjust follow button layout

* Update skeleton

* Use round button

* Translate
This commit is contained in:
Eric Bailey 2024-07-02 21:34:18 -05:00 • committed by GitHub
parent 6af78de9ee
commit 0598fc2faa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 564 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/FeedCard.tsx
View file

@ -30,7 +30,7 @@ import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
import {Link as InternalLink, LinkProps} from '#/components/Link'
import {Loader} from '#/components/Loader'
import * as Prompt from '#/components/Prompt'
import {RichText} from '#/components/RichText'
import {RichText, RichTextProps} from '#/components/RichText'
import {Text} from '#/components/Typography'
type Props = {
@ -70,22 +70,18 @@ export function Link({
}, [view, queryClient])
return (
<InternalLink to={href} {...props}>
<InternalLink to={href} style={[a.flex_col]} {...props}>
{children}
</InternalLink>
)
}
export function Outer({children}: {children: React.ReactNode}) {
return <View style={[a.flex_1, a.gap_md]}>{children}</View>
return <View style={[a.w_full, a.gap_md]}>{children}</View>
}
export function Header({children}: {children: React.ReactNode}) {
return (
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_md]}>
{children}
</View>
)
return <View style={[a.flex_row, a.align_center, a.gap_md]}>{children}</View>
}
export type AvatarProps = {src: string | undefined; size?: number}
@ -167,7 +163,10 @@ export function TitleAndBylinePlaceholder({creator}: {creator?: boolean}) {
)
}
export function Description({description}: {description?: string}) {
export function Description({
description,
...rest
}: {description?: string} & Partial<RichTextProps>) {
const rt = React.useMemo(() => {
if (!description) return
const rt = new RichTextApi({text: description || ''})
@ -175,7 +174,29 @@ export function Description({description}: {description?: string}) {
return rt
}, [description])
if (!rt) return null
return <RichText value={rt} style={[a.leading_snug]} disableLinks />
return <RichText value={rt} style={[a.leading_snug]} disableLinks {...rest} />
}
export function DescriptionPlaceholder() {
const t = useTheme()
return (
<View style={[a.gap_xs]}>
<View
style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
/>
<View
style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
/>
<View
style={[
a.rounded_xs,
a.w_full,
t.atoms.bg_contrast_50,
{height: 12, width: 100},
]}
/>
</View>
)
}
export function Likes({count}: {count: number}) {