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}) => (
)}
- ))}
+ ))*/}