From a01364bb16356528c0a15a21e0f9f80f92a606b2 Mon Sep 17 00:00:00 2001
From: amirhouieh <amir@status.im>
Date: Sat, 26 Aug 2023 15:54:35 +0200
Subject: [PATCH] fix #98

---
 src/components/Hero/Hero.tags.tsx | 17 ++---------------
 src/components/Hero/Hero.tsx      |  5 +----
 src/components/LPETag/LPETag.tsx  | 28 ++++++++++++++++++++++++++++
 src/components/LPETag/index.tsx   |  1 +
 src/components/Tags/Tags.tsx      | 19 ++++++++-----------
 src/utils/string.utils.ts         |  4 ++++
 6 files changed, 44 insertions(+), 30 deletions(-)
 create mode 100644 src/components/LPETag/LPETag.tsx
 create mode 100644 src/components/LPETag/index.tsx

diff --git a/src/components/Hero/Hero.tags.tsx b/src/components/Hero/Hero.tags.tsx
index 937bd66..bb15feb 100644
--- a/src/components/Hero/Hero.tags.tsx
+++ b/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>
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index d2822e6..840a0fb 100644
--- a/src/components/Hero/Hero.tsx
+++ b/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;
   }
diff --git a/src/components/LPETag/LPETag.tsx b/src/components/LPETag/LPETag.tsx
new file mode 100644
index 0000000..3c92712
--- /dev/null
+++ b/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
diff --git a/src/components/LPETag/index.tsx b/src/components/LPETag/index.tsx
new file mode 100644
index 0000000..ca1b94c
--- /dev/null
+++ b/src/components/LPETag/index.tsx
@@ -0,0 +1 @@
+export { default as LPETag } from './LPETag'
diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx
index 0c4b281..5a823ad 100644
--- a/src/components/Tags/Tags.tsx
+++ b/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
diff --git a/src/utils/string.utils.ts b/src/utils/string.utils.ts
index c9026a9..3a7062b 100644
--- a/src/utils/string.utils.ts
+++ b/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, ' ')
+}