56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
|
import { PageLink } from 'shared/components/page-link.mjs'
|
||
|
|
import { Lightbox } from 'shared/components/lightbox.mjs'
|
||
|
|
import { ImageWrapper } from 'shared/components/wrappers/img.mjs'
|
||
|
|
import { Author } from './author.mjs'
|
||
|
|
import { TimeAgo } from 'shared/components/mdx/meta.mjs'
|
||
|
|
import { useTranslation } from 'next-i18next'
|
||
|
|
import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
|
||
|
|
|
||
|
|
export const ns = ['common', 'posts']
|
||
|
|
|
||
|
|
export const PostArticle = ({ slug, frontmatter, MDX, page }) => {
|
||
|
|
const { t } = useTranslation('common')
|
||
|
|
return (
|
||
|
|
<article className="mb-12 px-8 max-w-7xl">
|
||
|
|
<div className="flex flex-row justify-between text-sm mb-1 mt-2">
|
||
|
|
<div>
|
||
|
|
<TimeAgo date={frontmatter.date} t={t} /> [{frontmatter.date}]
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{frontmatter.designs?.map((design) => (
|
||
|
|
<PageLink
|
||
|
|
href={`/showcase/designs/${design}`}
|
||
|
|
txt={design}
|
||
|
|
key={design}
|
||
|
|
className="px-2 capitalize"
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
By{' '}
|
||
|
|
<a href="#maker" className="text-secondary hover:text-secondary-focus">
|
||
|
|
{frontmatter.author || frontmatter.maker || 'FIXME: No displayname'}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<figure>
|
||
|
|
<Lightbox>
|
||
|
|
<ImageWrapper>
|
||
|
|
<img src={frontmatter.image} alt={frontmatter.caption} className="shadow m-auto" />
|
||
|
|
</ImageWrapper>
|
||
|
|
<figcaption
|
||
|
|
className="text-center mb-8 prose m-auto"
|
||
|
|
dangerouslySetInnerHTML={{ __html: frontmatter.caption }}
|
||
|
|
/>
|
||
|
|
</Lightbox>
|
||
|
|
</figure>
|
||
|
|
<div className="strapi prose lg:prose-lg mb-12 m-auto">
|
||
|
|
<MdxWrapper>{MDX}</MdxWrapper>
|
||
|
|
</div>
|
||
|
|
<div className="max-w-prose text-lg lg:text-xl">
|
||
|
|
<Author author={frontmatter.author || frontmatter.maker} />
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
)
|
||
|
|
}
|