diff --git a/src/screens/Search/components/ExploreRecommendations.tsx b/src/screens/Search/components/ExploreRecommendations.tsx
new file mode 100644
index 0000000000..e253cfb5ab
--- /dev/null
+++ b/src/screens/Search/components/ExploreRecommendations.tsx
@@ -0,0 +1,95 @@
+import {View} from 'react-native'
+import {Trans} from '@lingui/macro'
+
+import {isWeb} from '#/platform/detection'
+import {useTrendingSettings} from '#/state/preferences/trending'
+import {
+ DEFAULT_LIMIT as RECOMMENDATIONS_COUNT,
+ useTrendingTopics,
+} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingConfig} from '#/state/trending-config'
+import {atoms as a, useGutters, useTheme} from '#/alf'
+import {Hashtag_Stroke2_Corner0_Rounded} from '#/components/icons/Hashtag'
+import {
+ TrendingTopic,
+ TrendingTopicLink,
+ TrendingTopicSkeleton,
+} from '#/components/TrendingTopics'
+import {Text} from '#/components/Typography'
+
+export function ExploreRecommendations() {
+ const {enabled} = useTrendingConfig()
+ const {trendingDisabled} = useTrendingSettings()
+ return enabled && !trendingDisabled ? : null
+}
+
+function Inner() {
+ const t = useTheme()
+ const gutters = useGutters([0, 'compact'])
+ const {data: trending, error, isLoading} = useTrendingTopics()
+ const noRecs = !isLoading && !error && !trending?.suggested?.length
+
+ return error || noRecs ? null : (
+ <>
+
+
+
+
+
+ Recommended
+
+
+
+ Feeds we think you might like.
+
+
+
+
+
+
+ {isLoading ? (
+ Array(RECOMMENDATIONS_COUNT)
+ .fill(0)
+ .map((_, i) => )
+ ) : !trending?.suggested ? null : (
+ <>
+ {trending.suggested.map(topic => (
+
+ {({hovered}) => (
+
+ )}
+
+ ))}
+ >
+ )}
+
+
+ >
+ )
+}
diff --git a/src/screens/Search/components/ExploreTrendingTopics.tsx b/src/screens/Search/components/ExploreTrendingTopics.tsx
index e9be248cbf..be347dcd4d 100644
--- a/src/screens/Search/components/ExploreTrendingTopics.tsx
+++ b/src/screens/Search/components/ExploreTrendingTopics.tsx
@@ -58,7 +58,7 @@ function Inner() {
- What people are posting about now
+ What people are posting about.
diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx
index c1ebc10146..378ea59a4d 100644
--- a/src/view/screens/Search/Explore.tsx
+++ b/src/view/screens/Search/Explore.tsx
@@ -24,6 +24,7 @@ import {
ProfileCardFeedLoadingPlaceholder,
} from '#/view/com/util/LoadingPlaceholder'
import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {ExploreRecommendations} from '#/screens/Search/components/ExploreRecommendations'
import {ExploreTrendingTopics} from '#/screens/Search/components/ExploreTrendingTopics'
import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
import {Button} from '#/components/Button'
@@ -244,6 +245,10 @@ type ExploreScreenItems =
type: 'trendingTopics'
key: string
}
+ | {
+ type: 'recommendations'
+ key: string
+ }
| {
type: 'profile'
key: string
@@ -337,6 +342,11 @@ export function Explore() {
key: `trending-topics`,
})
+ i.push({
+ type: 'recommendations',
+ key: `recommendations`,
+ })
+
i.push({
type: 'header',
key: 'suggested-follows-header',
@@ -503,6 +513,9 @@ export function Explore() {
case 'trendingTopics': {
return
}
+ case 'recommendations': {
+ return
+ }
case 'profile': {
return (