88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import type { Metadata } from 'next';
|
|
import { draftMode } from 'next/headers'
|
|
import { notFound } from 'next/navigation';
|
|
import {fetchBlogPost, fetchBlogPosts, Widget} from "../../../../lib/contentful/blogPosts";
|
|
import Util from "node:util";
|
|
import RichText from "../../../../lib/contentful/RichText";
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Bbuddy - Blog item',
|
|
description: 'Bbuddy desc blog item'
|
|
};
|
|
|
|
interface BlogPostPageParams {
|
|
slug: string
|
|
}
|
|
|
|
interface BlogPostPageProps {
|
|
params: BlogPostPageParams
|
|
}
|
|
|
|
export async function generateStaticParams(): Promise<BlogPostPageParams[]> {
|
|
const blogPosts = await fetchBlogPosts({ preview: false })
|
|
|
|
return blogPosts.map((post) => ({ slug: post.slug }))
|
|
}
|
|
function renderWidget (widget: Widget) {
|
|
switch (widget.type){
|
|
case 'widgetParagraph':
|
|
return (
|
|
<>
|
|
<h2 className="title-h2">
|
|
{widget.widget.subTitle}
|
|
</h2>
|
|
<RichText document={widget.widget.body} />
|
|
</>
|
|
)
|
|
case 'widgetMedia':
|
|
return (
|
|
<img src={widget.widget.file?.src}/>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default async function BlogItem({params}: { params: BlogPostPageParams }) {
|
|
const item = await fetchBlogPost({slug: params.slug, preview: draftMode().isEnabled })
|
|
console.log('BLOG POST')
|
|
console.log(Util.inspect(item, {showHidden: false, depth: null, colors: true}))
|
|
if (!item) notFound();
|
|
|
|
return (
|
|
<div className="b-news-page">
|
|
<div className="b-inner">
|
|
<h1 className="b-news-page__title">{item.title}</h1>
|
|
<div className="news-item__badge">{item.category}</div>
|
|
<div className="b-news-page__text">
|
|
|
|
</div>
|
|
<div className="b-news-page__image">
|
|
<img className="" src="/images/news1.png" alt="" />
|
|
</div>
|
|
<div className="news-item__info">
|
|
<div className="news-item__info__author">
|
|
<img className="" src={item.author.avatar.src} alt="" />
|
|
<div className="news-item__info__author__inner">
|
|
<div className="news-item__info__name">{item.author?.name}</div>
|
|
<div className="news-item__info__date">{item.createdAt}</div>
|
|
</div>
|
|
</div>
|
|
<div className="news-item__info__counter">
|
|
<div className="news-item__info__like">
|
|
<img className="" src="/images/heart-outline.svg" alt="" />
|
|
165
|
|
</div>
|
|
<div className="news-item__info__share">
|
|
<img className="" src="/images/share-social.svg" alt="" />
|
|
Share
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="b-news-page__inner">
|
|
{item.body.map(renderWidget)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|