diff --git a/src/components/Article/Header/Article.Header.tsx b/src/components/Article/Header/Article.Header.tsx index 595cceb..c40f3bb 100644 --- a/src/components/Article/Header/Article.Header.tsx +++ b/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} - {subtitle && {subtitle}} - + {subtitle && ( + + {subtitle} + + )} + @@ -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; diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx index 9575992..c196d8f 100644 --- a/src/components/Post/Post.tsx +++ b/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({ )} - {tags.length > 0 && ( - - {tags.map((tag) => ( - - {tag} - - ))} - - )} + {tags.length > 0 && } ) } @@ -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; diff --git a/src/components/Article/Header/Article.Tags.tsx b/src/components/Tags/Tags.tsx similarity index 77% rename from src/components/Article/Header/Article.Tags.tsx rename to src/components/Tags/Tags.tsx index 81bc22a..7c5e4e1 100644 --- a/src/components/Article/Header/Article.Tags.tsx +++ b/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 ? ( {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 diff --git a/src/components/Tags/index.tsx b/src/components/Tags/index.tsx new file mode 100644 index 0000000..5c27918 --- /dev/null +++ b/src/components/Tags/index.tsx @@ -0,0 +1 @@ +export { default as Tags } from './Tags'