feat: implement Tags component

src/components/Article/Header/Article.Header.tsx

@@ -6,9 +6,9 @@ import { PostImageRatio } from '../../Post/Post'
 import ArticleStats from '../Article.Stats'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import ArticleTags from './Article.Tags'
 import ArticleSummary from './Article.Summary'
 import { Authors } from '@/components/Authors'
+import { Tags } from '@/components/Tags'
 
 const ArticleHeader = ({
   title,
@@ -41,8 +41,16 @@ const ArticleHeader = ({
       >
         {title}
       </ArticleTitle>
-      {subtitle && <ArticleSubtitle>{subtitle}</ArticleSubtitle>}
-      <ArticleTags tags={tags} />
+      {subtitle && (
+        <ArticleSubtitle
+          variant="body1"
+          genericFontFamily="sans-serif"
+          component="div"
+        >
+          {subtitle}
+        </ArticleSubtitle>
+      )}
+      <Tags tags={tags} />
       <AuthorsContainer>
         <Authors mentions={mentions} email={true} />
       </AuthorsContainer>
@@ -62,7 +70,9 @@ const ArticleTitle = styled(CustomTypography)`
   margin-bottom: 24px;
 `
 
-const ArticleSubtitle = styled(CustomTypography)``
+const ArticleSubtitle = styled(CustomTypography)`
+  margin-bottom: 16px;
+`
 
 const AuthorsContainer = styled.div`
   margin-block: 24px;

src/components/Post/Post.tsx

@@ -1,4 +1,4 @@
-import { Tag, Typography } from '@acid-info/lsd-react'
+import { Typography } from '@acid-info/lsd-react'
 import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
 import styled from '@emotion/styled'
 import Image from 'next/image'
@@ -11,6 +11,7 @@ import {
 } from '@/lib/unbody/unbody.types'
 import { Authors } from '../Authors'
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
+import { Tags } from '@/components/Tags'
 
 export enum PostImageRatio {
   PORTRAIT = 'portrait',
@@ -174,15 +175,7 @@ export default function Post({
           </Typography>
         </PodcastAuthor>
       )}
-      {tags.length > 0 && (
-        <TagContainer>
-          {tags.map((tag) => (
-            <Tag size="small" disabled={false} key={tag}>
-              {tag}
-            </Tag>
-          ))}
-        </TagContainer>
-      )}
+      {tags.length > 0 && <Tags tags={tags} />}
     </Container>
   )
 }
@@ -224,11 +217,6 @@ const CustomTypography = styled(Typography)`
   overflow: hidden;
   word-break: break-word;
 `
-const TagContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-`
 
 const PodcastAuthor = styled.div`
   display: flex;

src/components/Tags/Tags.tsx

@@ -1,7 +1,7 @@
 import { Tag } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 
-const ArticleTags = ({ tags }: { tags: string[] }) =>
+const Tags = ({ tags }: { tags: string[] }) =>
   tags.length > 0 ? (
     <TagContainer>
       {tags.map((tag) => (
@@ -15,7 +15,6 @@ const ArticleTags = ({ tags }: { tags: string[] }) =>
 const TagContainer = styled.div`
   display: flex;
   gap: 8px;
-  margin-top: 16px;
 `
 
-export default ArticleTags
+export default Tags

src/components/Tags/index.tsx

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