Improve explore treatment a bit, add some polish to cards

src/components/GradientFill.tsx

@@ -6,6 +6,7 @@ export function GradientFill({
   gradient,
 }: {
   gradient:
+    | typeof tokens.gradients.primary
     | typeof tokens.gradients.sky
     | typeof tokens.gradients.midnight
     | typeof tokens.gradients.sunrise

src/components/TrendingTopics.tsx

@@ -2,42 +2,25 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useGutters, useTheme, ViewStyleProp} from '#/alf'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function Grid({topics}: {topics: string[]}) {
-  return (
-    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, a.px_sm, a.py_sm]}>
-      {topics.map(topic => (
-        <Item key={topic} topic={topic} />
-      ))}
-    </View>
-  )
-}
-
-export function Item({topic}: {topic: string}) {
-  return (
-    <Link topic={topic}>
-      <Card topic={topic} />
-    </Link>
-  )
-}
-
-export function Card({topic}: {topic: string}) {
+export function Topic({topic, style}: {topic: string} & ViewStyleProp) {
   const t = useTheme()
   return (
     <View
       style={[
-        a.flex_1,
-        a.gap_xs,
+        a.p_sm,
         a.px_md,
-        a.py_md,
+        a.rounded_md,
         a.border,
         t.atoms.border_contrast_medium,
-        a.rounded_md,
+        style,
       ]}>
-      <Topic topic={topic} />
+      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+        {topic}
+      </Text>
     </View>
   )
 }
@@ -65,15 +48,26 @@ export function Link({
   )
 }
 
-export function Topic({topic}: {topic: string}) {
+export function Grid({topics}: {topics: string[]}) {
+  const t = useTheme()
+  const gutters = useGutters([0, 'compact'])
   return (
-    <View style={[a.flex_1]}>
-      <Text
-        emoji
-        style={[a.text_md, a.font_bold, a.leading_snug, a.self_start]}
-        numberOfLines={1}>
-        {topic}
-      </Text>
+    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
+      {topics.map(topic => (
+        <Link key={topic} topic={topic}>
+          {({hovered}) => (
+            <Topic
+              topic={topic}
+              style={[
+                hovered && [
+                  t.atoms.border_contrast_high,
+                  t.atoms.bg_contrast_25,
+                ],
+              ]}
+            />
+          )}
+        </Link>
+      ))}
     </View>
   )
 }