feat: implement Tags component
This commit is contained in:
parent
73844bcfe2
commit
4e32cad1fd
|
@ -6,9 +6,9 @@ import { PostImageRatio } from '../../Post/Post'
|
||||||
import ArticleStats from '../Article.Stats'
|
import ArticleStats from '../Article.Stats'
|
||||||
import { Typography } from '@acid-info/lsd-react'
|
import { Typography } from '@acid-info/lsd-react'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import ArticleTags from './Article.Tags'
|
|
||||||
import ArticleSummary from './Article.Summary'
|
import ArticleSummary from './Article.Summary'
|
||||||
import { Authors } from '@/components/Authors'
|
import { Authors } from '@/components/Authors'
|
||||||
|
import { Tags } from '@/components/Tags'
|
||||||
|
|
||||||
const ArticleHeader = ({
|
const ArticleHeader = ({
|
||||||
title,
|
title,
|
||||||
|
@ -41,8 +41,16 @@ const ArticleHeader = ({
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</ArticleTitle>
|
</ArticleTitle>
|
||||||
{subtitle && <ArticleSubtitle>{subtitle}</ArticleSubtitle>}
|
{subtitle && (
|
||||||
<ArticleTags tags={tags} />
|
<ArticleSubtitle
|
||||||
|
variant="body1"
|
||||||
|
genericFontFamily="sans-serif"
|
||||||
|
component="div"
|
||||||
|
>
|
||||||
|
{subtitle}
|
||||||
|
</ArticleSubtitle>
|
||||||
|
)}
|
||||||
|
<Tags tags={tags} />
|
||||||
<AuthorsContainer>
|
<AuthorsContainer>
|
||||||
<Authors mentions={mentions} email={true} />
|
<Authors mentions={mentions} email={true} />
|
||||||
</AuthorsContainer>
|
</AuthorsContainer>
|
||||||
|
@ -62,7 +70,9 @@ const ArticleTitle = styled(CustomTypography)`
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const ArticleSubtitle = styled(CustomTypography)``
|
const ArticleSubtitle = styled(CustomTypography)`
|
||||||
|
margin-bottom: 16px;
|
||||||
|
`
|
||||||
|
|
||||||
const AuthorsContainer = styled.div`
|
const AuthorsContainer = styled.div`
|
||||||
margin-block: 24px;
|
margin-block: 24px;
|
||||||
|
|
|
@ -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 { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
|
@ -11,6 +11,7 @@ import {
|
||||||
} from '@/lib/unbody/unbody.types'
|
} from '@/lib/unbody/unbody.types'
|
||||||
import { Authors } from '../Authors'
|
import { Authors } from '../Authors'
|
||||||
import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
|
import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
|
||||||
|
import { Tags } from '@/components/Tags'
|
||||||
|
|
||||||
export enum PostImageRatio {
|
export enum PostImageRatio {
|
||||||
PORTRAIT = 'portrait',
|
PORTRAIT = 'portrait',
|
||||||
|
@ -174,15 +175,7 @@ export default function Post({
|
||||||
</Typography>
|
</Typography>
|
||||||
</PodcastAuthor>
|
</PodcastAuthor>
|
||||||
)}
|
)}
|
||||||
{tags.length > 0 && (
|
{tags.length > 0 && <Tags tags={tags} />}
|
||||||
<TagContainer>
|
|
||||||
{tags.map((tag) => (
|
|
||||||
<Tag size="small" disabled={false} key={tag}>
|
|
||||||
{tag}
|
|
||||||
</Tag>
|
|
||||||
))}
|
|
||||||
</TagContainer>
|
|
||||||
)}
|
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -224,11 +217,6 @@ const CustomTypography = styled(Typography)`
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
`
|
`
|
||||||
const TagContainer = styled.div`
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
overflow-x: auto;
|
|
||||||
`
|
|
||||||
|
|
||||||
const PodcastAuthor = styled.div`
|
const PodcastAuthor = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { Tag } from '@acid-info/lsd-react'
|
import { Tag } from '@acid-info/lsd-react'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
|
|
||||||
const ArticleTags = ({ tags }: { tags: string[] }) =>
|
const Tags = ({ tags }: { tags: string[] }) =>
|
||||||
tags.length > 0 ? (
|
tags.length > 0 ? (
|
||||||
<TagContainer>
|
<TagContainer>
|
||||||
{tags.map((tag) => (
|
{tags.map((tag) => (
|
||||||
|
@ -15,7 +15,6 @@ const ArticleTags = ({ tags }: { tags: string[] }) =>
|
||||||
const TagContainer = styled.div`
|
const TagContainer = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 16px;
|
|
||||||
`
|
`
|
||||||
|
|
||||||
export default ArticleTags
|
export default Tags
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Tags } from './Tags'
|
Loading…
Reference in New Issue