Align components

src/components/TrendingTopics.tsx

@@ -1,42 +1,20 @@
 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 {hasMutedWord} from '@atproto/api/dist/moderation/mutewords'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
+import {makeProfileLink} from '#/lib/routes/links'
+import {feedUriToHref} from '#/lib/strings/url-helpers'
+// import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
+// import {CloseQuote_Filled_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
+// import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
 import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import {feedUriToHref} from '#/lib/strings/url-helpers'
-import {makeProfileLink} 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'
-import {usePreferencesQuery} from '#/state/queries/preferences'
-import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
-
-export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) {
-  const t = useTheme()
-  return (
-    <View
-      style={[
-        a.p_xs,
-        a.px_sm,
-        a.rounded_sm,
-        a.border,
-        t.atoms.border_contrast_medium,
-        t.atoms.bg,
-        style,
-      ]}>
-      <Text
-        style={[a.flex_1, a.text_sm, a.font_bold, a.leading_tight]}
-        numberOfLines={1}>
-        {topic}
-      </Text>
-    </View>
-  )
-}
 
 export function TrendingTopic({
   topic: raw,
@@ -48,41 +26,76 @@ export function TrendingTopic({
 
   if (!topic) return null
 
-  const hasAvi = topic.type === 'feed' || topic.type === 'profile'
+  const isSmall = size === 'small'
+  // const hasAvi = topic.type === 'feed' || topic.type === 'profile'
+  // const aviSize = isSmall ? 16 : 20
+  // const iconSize = isSmall ? 16 : 20
 
   return (
     <View
       style={[
         a.flex_row,
         a.align_center,
-        {
-          padding: 6,
-          gap: hasAvi ? 6 : 2,
-        },
-        a.pr_md,
         a.rounded_full,
         a.border,
         t.atoms.border_contrast_medium,
         t.atoms.bg,
+        isSmall
+          ? [
+              {
+                paddingVertical: 5,
+                paddingHorizontal: 10,
+              },
+            ]
+          : [a.py_sm, a.px_md],
         style,
+        /*
+        {
+          padding: 6,
+          gap: hasAvi ? 4 : 2,
+        },
+        a.pr_md,
+       */
       ]}>
-      <View style={[a.align_center, a.justify_center, a.rounded_full, a.overflow_hidden, {
-        width: 20,
-        height: 20,
-      }]}>
+      {/*
+      <View
+        style={[
+          a.align_center,
+          a.justify_center,
+          a.rounded_full,
+          a.overflow_hidden,
+          {
+            width: aviSize,
+            height: aviSize,
+          },
+        ]}>
         {topic.type === 'tag' ? (
-          <Hashtag size='sm' />
+          <Hashtag width={iconSize} />
         ) : topic.type === 'topic' ? (
-          <Search size='sm' />
+          <Quote width={iconSize - 2} />
         ) : topic.type === 'feed' ? (
-          <UserAvatar type='user' size={20} avatar='https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:vpkhqolt662uhesyj6nxm7ys/bafkreigpxhbzcwowt3fu6zrhdlen5hdw4onza2lnzg4rv7h5oddvhy4rpq@jpeg' />
+          <UserAvatar
+            type="user"
+            size={aviSize}
+            avatar=""
+          />
         ) : (
-          <UserAvatar type='user' size={20} avatar='https://cdn.bsky.app/img/avatar/plain/did:plc:ragtjsm2j2vknwkz3zp4oxrd/bafkreihhpqdyntku66himwor5wlhtdo44hllmngj2ofmbqnm25bdm454wq@jpeg' />
+          <UserAvatar
+            type="user"
+            size={aviSize}
+            avatar=""
+          />
         )}
       </View>
+        */}
 
       <Text
-        style={[a.flex_1, a.text_md, a.font_bold, a.leading_tight, { paddingBottom: 1 }]}
+        style={[
+          a.flex_1,
+          a.font_bold,
+          a.leading_tight,
+          isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
+        ]}
         numberOfLines={1}>
         {topic.name}
       </Text>
@@ -113,43 +126,6 @@ export function TrendingTopicLink({
   )
 }
 
-export function Link({
-  topic,
-  children,
-  style,
-  ...rest
-}: {
-  topic: string
-} & Omit<LinkProps, 'to' | 'label'>) {
-  const {_} = useLingui()
-  return (
-    <InternalLink
-      label={_(msg`Search posts that include ${topic}`)}
-      to={{
-        screen: 'Search',
-        params: {q: topic},
-      }}
-      style={[a.flex_col, style]}
-      {...rest}>
-      {children}
-    </InternalLink>
-  )
-}
-
-// temp
-export const TOPICS = [
-  '#atproto',
-  'South Korea',
-  'Wired',
-  'Basket Weaving',
-  'Coup',
-  'Chappel Roan',
-  'the juice',
-  'Superman',
-  '#FCF',
-  'Open Web',
-]
-
 type ParsedTrendingTopic =
   | {
       type: 'topic' | 'tag'
@@ -180,10 +156,13 @@ export function useTopic(raw: TrendingTopic): ParsedTrendingTopic | undefined {
   return React.useMemo(() => {
     const {topic: name, link: uri} = raw
 
-    if (hasMutedWord({
-      mutedWords,
-      text: name
-    })) return
+    if (
+      hasMutedWord({
+        mutedWords,
+        text: name,
+      })
+    )
+      return
 
     if (!uri.startsWith('at://')) {
       if (uri.startsWith('/search')) {
@@ -226,5 +205,5 @@ export function useTopic(raw: TrendingTopic): ParsedTrendingTopic | undefined {
         }
       }
     }
-  }, [raw, mutedWords])
+  }, [_, raw, mutedWords])
 }