Change home tags to communities

web/components/tags-list.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx'
 import { Row } from './layout/row'
 import { SiteLink } from './site-link'
-import { Fold } from '../../common/fold'
 
 function Hashtag(props: { tag: string; noLink?: boolean }) {
   const { tag, noLink } = props
@@ -45,11 +44,11 @@ export function TagsList(props: {
   )
 }
 
-export function FoldTag(props: { fold: Fold }) {
+export function FoldTag(props: { fold: { slug: string; name: string } }) {
   const { fold } = props
-  const { name } = fold
+  const { slug, name } = fold
   return (
-    <SiteLink href={`/fold/${fold.slug}`} className="flex items-center">
+    <SiteLink href={`/fold/${slug}`} className="flex items-center">
       <div
         className={clsx(
           'bg-white border-2 px-4 py-1 rounded-full shadow-md',
@@ -62,7 +61,10 @@ export function FoldTag(props: { fold: Fold }) {
   )
 }
 
-export function FoldTagList(props: { folds: Fold[]; className?: string }) {
+export function FoldTagList(props: {
+  folds: { slug: string; name: string }[]
+  className?: string
+}) {
   const { folds, className } = props
   return (
     <Row className={clsx('flex-wrap gap-2 items-center', className)}>
@@ -70,7 +72,7 @@ export function FoldTagList(props: { folds: Fold[]; className?: string }) {
         <>
           <div className="text-gray-500 mr-1">Communities</div>
           {folds.map((fold) => (
-            <FoldTag key={fold.id} fold={fold} />
+            <FoldTag key={fold.slug} fold={fold} />
           ))}
         </>
       )}

web/pages/home.tsx

@@ -17,7 +17,7 @@ import { Fold } from '../../common/fold'
 import { filterDefined } from '../../common/util/array'
 import { useUserBets } from '../hooks/use-user-bets'
 import { LoadingIndicator } from '../components/loading-indicator'
-import { TagsList } from '../components/tags-list'
+import { FoldTagList } from '../components/tags-list'
 
 export async function getStaticProps() {
   const [contracts, folds] = await Promise.all([
@@ -131,19 +131,21 @@ const Home = (props: { contracts: Contract[]; folds: Fold[] }) => {
       <Col className="items-center">
         <Col className="max-w-3xl w-full">
           <FeedCreate user={user ?? undefined} />
-          <Spacer h={4} />
+          <Spacer h={6} />
-          <TagsList
+          <FoldTagList
             className="mx-2"
-            tags={[
+            folds={[
-              '#politics',
+              { name: 'Politics', slug: 'politics' },
-              '#crypto',
+              { name: 'Crypto', slug: 'crypto' },
-              '#covid',
+              { name: 'Sports', slug: 'sports' },
-              '#sports',
+              { name: 'Science', slug: 'science' },
-              '#meta',
+              {
-              '#science',
+                name: 'Manifold Markets',
+                slug: 'manifold-markets',
+              },
             ]}
           />
-          <Spacer h={4} />
+          <Spacer h={6} />
           {activeContracts ? (
             <ActivityFeed
               contracts={activeContracts}