Merge remote-tracking branch 'origin/develop' into group-lookup

app/soapbox/features/groups/components/discover/popular-tags.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Link from 'soapbox/components/link';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { usePopularTags } from 'soapbox/hooks/api';
+
+import TagListItem from './tag-list-item';
+
+const PopularTags = () => {
+  const { tags, isFetched, isError } = usePopularTags();
+  const isEmpty = (isFetched && tags.length === 0) || isError;
+
+  return (
+    <Stack space={4}>
+      <HStack alignItems='center' justifyContent='between'>
+        <Text size='xl' weight='bold'>
+          <FormattedMessage
+            id='groups.discover.tags.title'
+            defaultMessage='Browse Topics'
+          />
+        </Text>
+
+        <Link to='/groups/tags'>
+          <Text tag='span' weight='medium' size='sm' theme='inherit'>
+            <FormattedMessage
+              id='groups.discover.tags.show_more'
+              defaultMessage='Show More'
+            />
+          </Text>
+        </Link>
+      </HStack>
+
+      {isEmpty ? (
+        <Text theme='muted'>
+          <FormattedMessage
+            id='groups.discover.tags.empty'
+            defaultMessage='Unable to fetch popular topics at this time. Please check back later.'
+          />
+        </Text>
+      ) : (
+        <Stack space={4}>
+          {tags.slice(0, 10).map((tag) => (
+            <TagListItem key={tag.id} tag={tag} />
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export default PopularTags;

app/soapbox/features/groups/components/discover/tag-list-item.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { Stack, Text } from 'soapbox/components/ui';
+
+import type { GroupTag } from 'soapbox/schemas';
+
+interface ITagListItem {
+  tag: GroupTag
+}
+
+const TagListItem = (props: ITagListItem) => {
+  const { tag } = props;
+
+  return (
+    <Link to={`/groups/discover/tags/${tag.id}`} className='group'>
+      <Stack>
+        <Text
+          weight='bold'
+          className='group-hover:text-primary-600 group-hover:underline dark:group-hover:text-accent-blue'
+        >
+          #{tag.name}
+        </Text>
+
+        <Text size='sm' theme='muted' weight='medium'>
+          <FormattedMessage
+            id='groups.discovery.tags.no_of_groups'
+            defaultMessage='Number of groups'
+          />
+          :{' '}
+          {tag.uses}
+        </Text>
+      </Stack>
+    </Link>
+  );
+};
+
+export default TagListItem;