Skip to content

Commit

Permalink
Merge pull request #47 from route06inc/implement-post-tags
Browse files Browse the repository at this point in the history
feat: Implement post tags
  • Loading branch information
kumanoayumi authored Oct 17, 2024
2 parents 9082c68 + f4c78bd commit 51db3ce
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 0 deletions.
19 changes: 19 additions & 0 deletions frontend/apps/service-site/src/contents/posts/1/en.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,25 @@ tags:
- Innovation
- Agility
- Disruption
- No-Code
- App Development
- Non-Programmers
- Tools
- Business
- UX Design
- Platforms
- Prototyping
- Efficiency
- Scalability
- Automation
- Data Management
- Leadership
- Startups
- Rapid Development
- Cost Reduction
- Education
- User Experience
- AI Integration
categories:
- No-Code
- Technology
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,7 @@

.right {
width: 274px;
display: flex;
flex-direction: column;
gap: var(--spacing-10, 40px);
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { type Lang, fallbackLang } from '@/features/i18n'
import { PostCategories } from '@/features/posts/components/PostCategories'
import { PostHero } from '@/features/posts/components/PostHero'
import { PostTags } from '@/features/posts/components/PostTags'
import { MDXContent } from '@/libs/contentlayer'
import { notFound } from 'next/navigation'
import type { FC } from 'react'
Expand Down Expand Up @@ -50,6 +51,7 @@ export const PostDetailPage: FC<Props> = ({ lang, slug }) => {
<PostCategories
categories={post.categories.map((category) => ({ name: category }))}
/>
<PostTags tags={post.tags.map((tag) => ({ name: tag }))} />
</div>
</div>
</article>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.title {
display: inline-block;
font-family: var(--message-font, Montserrat);
font-size: var(--font-size-6, 16px);
font-weight: 600;
line-height: 1.2;
color: var(--link-default, #bebfc1);
height: 24px;
padding: 1px 0;
gap: var(--spacing-1, 4px);
}

.list {
margin-top: var(--spacing-5, 20px);
display: flex;
flex-direction: row;
gap: var(--spacing-4, 16px);
flex-wrap: wrap;
row-gap: var(--spacing-3, 12px);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import type { Meta, StoryObj } from '@storybook/react'

import type { ComponentProps } from 'react'
import { PostTags } from './PostTags'

type Props = ComponentProps<typeof PostTags>
const StoryComponent = (props: Props) => {
return <PostTags {...props}>Categories</PostTags>
}

export default {
component: StoryComponent,
} satisfies Meta<typeof StoryComponent>

export const Default: StoryObj<typeof StoryComponent> = {
args: {
tags: [
{ name: 'No-Code' },
{ name: 'Technology' },
{ name: 'DX' },
{ name: 'Innovation' },
{ name: 'Startups' },
],
},
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Badge } from '@/components/Badge'
import type { PropsWithChildren } from 'react'
import styles from './PostTags.module.css'

type Props = PropsWithChildren<{
tags: Array<{ name: string }>
}>

export const PostTags = ({ tags }: Props) => {
return (
<div>
<p className={styles.title}>Tags</p>
<ul className={styles.list}>
{tags.map((tag) => (
<li key={tag.name}>
<Badge type="outline">{tag.name}</Badge>
</li>
))}
</ul>
</div>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './PostTags'
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export * from './TableOfContents'
export * from './PostHero'
export * from './BodyText'
export * from './PostCategories'
export * from './PostTags'

export * from './PostDetailPage'
export * from './PostListPage'

0 comments on commit 51db3ce

Please sign in to comment.