fix #98

src/components/Hero/Hero.tags.tsx

@@ -3,31 +3,18 @@ import styled from '@emotion/styled'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { Tag } from '@acid-info/lsd-react'
+import { LPETag } from '@/components/LPETag'
 
 export type NavbarFilter = Partial<React.ComponentProps<typeof Container>> & {
   tags?: string[]
 }
 
 export const HeroTags: React.FC<NavbarFilter> = ({ tags = [], ...props }) => {
-  const router = useRouter()
-
-  const onTagClick = (tag: string) => {
-    router.push(`/search?topics=${tag}`)
-  }
-
   return (
     <Container {...props}>
       <Tags>
         {tags.map((tag, index) => (
-          <Tag
-            size={'small'}
-            disabled={false}
-            key={index}
-            onClick={() => onTagClick(tag)}
-            variant={'outlined'}
-          >
-            {tag}
-          </Tag>
+          <LPETag tag={tag} key={`tag-${index}`} />
         ))}
       </Tags>
     </Container>

src/components/Hero/Hero.tsx

@@ -39,7 +39,7 @@ export const Hero: React.FC<HeroProps> = ({ tags = [], ...props }) => {
         Your Guide to Network States and the technology driving Sovereign
         Communities
       </Description>
-      <HeroTags tags={tags} className="navbar__filter" />
+      <HeroTags tags={tags} />
     </Container>
   )
 }
@@ -53,9 +53,6 @@ const Container = styled.div`
   padding: 24px 16px 40px 16px;
   border-bottom: 1px solid rgb(var(--lsd-border-primary));
 
-  .navbar__filter {
-  }
-
   @media (max-width: ${(props) => props.theme.breakpoints.md.width}px) {
     padding: 8px 0 16px 0;
   }

src/components/LPETag/LPETag.tsx

@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import { Tag } from '@acid-info/lsd-react'
+import { formatTagText } from '@/utils/string.utils'
+import { TagProps } from '@acid-info/lsd-react/dist/components/Tag/Tag'
+import styled from '@emotion/styled'
+
+interface Props {
+  tag: string
+  LSDProps?: TagProps
+}
+const LPETag = ({ tag, LSDProps = {} }: Props) => {
+  return (
+    <Container href={`/search?topic=${tag}`}>
+      <Tag size="small" variant={'outlined'} {...LSDProps}>
+        {formatTagText(tag)}
+      </Tag>
+    </Container>
+  )
+}
+
+const Container = styled(Link)`
+  text-decoration: none;
+  text-transform: capitalize;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+export default LPETag

src/components/LPETag/index.tsx

@@ -0,0 +1 @@
+export { default as LPETag } from './LPETag'

src/components/Tags/Tags.tsx

@@ -1,7 +1,6 @@
-import { Tag } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { LPETag } from '@/components/LPETag'
 
 export type TagsProps = React.ComponentProps<typeof TagsContainer> & {
   tags: string[]
@@ -15,15 +14,13 @@ const Tags: React.FC<TagsProps> = ({ tags, className, ...props }) => {
   return tags?.length > 0 ? (
     <TagsContainer className={className} {...props}>
       {tags.map((tag, idx) => (
-        <Link key={`tag-${idx}`} href={`/search?topics=${tag}`}>
-          <Tag
-            size="small"
-            disabled={false}
-            variant={topics?.includes(tag) ? 'filled' : 'outlined'}
-          >
-            {tag}
-          </Tag>
-        </Link>
+        <LPETag
+          tag={tag}
+          key={`tag-${idx}`}
+          LSDProps={{
+            variant: topics?.includes(tag) ? 'filled' : 'outlined',
+          }}
+        />
       ))}
     </TagsContainer>
   ) : null

src/utils/string.utils.ts

@@ -74,3 +74,7 @@ export function parseTimestamp(text: string) {
   const time = text.match(/^\d{2}:\d{2}/g)
   return time ? time[0] : ''
 }
+
+export function formatTagText(tag: string) {
+  return tag.replace(/_/g, ' ')
+}