Wire up interstitial and Explore page

2024-12-16 13:59:30 -06:00
parent e92095810d
commit c8a6e3b323
5 changed files with 161 additions and 113 deletions
@@ -0,0 +1,35 @@
+import {View} from 'react-native'
+
+import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {atoms as a, useTheme, useGutters} from '#/alf'
+import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
+
+export function ExploreTrendingTopics() {
+  const t = useTheme()
+  const gutters = useGutters([0, 'compact'])
+  const {data: topics, error, isLoading} = useTrendingTopics()
+
+  return (
+    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
+      {isLoading ? null : error || !topics ? null : (
+        <>
+          {topics.map(topic => (
+            <TrendingTopicLink key={topic.link} topic={topic}>
+              {({hovered}) => (
+                <TrendingTopic
+                  topic={topic}
+                  style={[
+                    hovered && [
+                      t.atoms.border_contrast_high,
+                      t.atoms.bg_contrast_25,
+                    ],
+                  ]}
+                />
+              )}
+            </TrendingTopicLink>
+          ))}
+        </>
+      )}
+    </View>
+  )
+}