diff --git a/src/components/TrendingTopics.tsx b/src/components/TrendingTopics.tsx index 090415ae61..b0a7e10b7f 100644 --- a/src/components/TrendingTopics.tsx +++ b/src/components/TrendingTopics.tsx @@ -1,10 +1,17 @@ +import React from 'react' import {View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {AtUri} from '@atproto/api' import {atoms as a, useGutters, useTheme, ViewStyleProp} from '#/alf' import {Link as InternalLink, LinkProps} from '#/components/Link' import {Text} from '#/components/Typography' +import {BSKY_APP_HOST, feedUriToHref} from '#/lib/strings/url-helpers' +import {makeProfileLink, makeSearchLink} from '#/lib/routes/links' +import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' +import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass' +import {UserAvatar} from '#/view/com/util/UserAvatar' export function TopicLarge({topic, style}: {topic: string} & ViewStyleProp) { const t = useTheme() @@ -50,6 +57,58 @@ export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) { ) } +export function Topic({ + topic: raw, + size, + style, +}: {topic: RawTopic; size?: 'large' | 'small'} & ViewStyleProp) { + const t = useTheme() + const topic = useTopic(raw) + + if (!topic) return null + + const hasAvi = topic.type === 'feed' || topic.type === 'profile' + + return ( + + + {topic.type === 'tag' ? ( + + ) : topic.type === 'topic' ? ( + + ) : topic.type === 'feed' ? ( + + ) : ( + + )} + + + + {topic.name} + + + ) +} + export function Link({ topic, children, @@ -110,3 +169,91 @@ export const TOPICS = [ '#FCF', 'Open Web', ] + +export const TOP = [ + { + name: '#atproto', + uri: 'https://bsky.app/hashtag/atproto', + }, + { + name: 'South Korea', + uri: BSKY_APP_HOST + makeSearchLink({query: 'South Korea'}), + }, + { + name: 'Paul Frazee', + uri: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.actor.profile/self' + }, + { + name: 'Wired', + uri: BSKY_APP_HOST + makeSearchLink({query: 'Wired'}), + }, + { + name: 'Quiet Posters', + uri: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq', + }, +] + +type RawTopic = { + name: string + uri: string +} + +type Topic = + | { + type: 'topic' | 'tag' + name: string + url: string + uri: undefined + } + | { + type: 'profile' | 'feed' + name: string + url: string + uri: AtUri + } + +export function useTopic(topic: RawTopic): Topic | undefined { + return React.useMemo(() => { + const {name, uri} = topic + + if (uri.startsWith('https')) { + const url = new URL(uri) + if (url.origin !== BSKY_APP_HOST) return + if (url.pathname.startsWith('/search')) { + return { + type: 'topic', + name, + url: url.pathname, + uri: undefined, + } + } else if (url.pathname.startsWith('/hashtag')) { + return { + type: 'tag', + name: name.replace(/^#/, ''), + url: url.pathname, + uri: undefined, + } + } + } else { + const urip = new AtUri(uri) + switch (urip.collection) { + case 'app.bsky.actor.profile': { + return { + type: 'profile', + name, + uri: urip, + url: makeProfileLink({did: urip.host, handle: urip.host}), + } + } + case 'app.bsky.feed.generator': { + return { + type: 'feed', + name, + uri: urip, + url: feedUriToHref(uri), + } + } + } + } + }, [topic]) +} diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx index b6705158fd..cee0524cf5 100644 --- a/src/components/interstitials/Trending.tsx +++ b/src/components/interstitials/Trending.tsx @@ -53,7 +53,12 @@ export function TrendingInterstitial() { - {Trending.TOPICS.slice(0, 8).map(topic => ( + {Trending.TOP.slice(0, 8).map(topic => ( + + ))} + {/*Trending.TOPICS.slice(0, 8).map(topic => ( {({hovered}) => ( )} - ))} + ))*/}