update project api and page, set pagination in blog and create content generator component, create blog single page, ui fix

src/app/[locale]/blog/[id]/page.tsx

@@ -0,0 +1,48 @@
+import routeFactory from '@/assets/constants/routeFactory';
+import images from '@/assets/images/images';
+import Breadcrumb from '@/components/layout/breadcrumb';
+import { IBreadcrumbItem } from '@/components/layout/breadcrumb/breadcrumb';
+import ContentGenerator from '@/components/layout/contentGenerator';
+import InnerPageBanner from '@/components/layout/innerPages/banner';
+import { ILayoutLocaleParams } from '@/models/layout';
+import { getPost } from '@/services/blog';
+import { getTranslations } from 'next-intl/server';
+
+interface IPageParams extends ILayoutLocaleParams {
+  id: string;
+}
+
+export default async function PostPage({ params }: { params: IPageParams }) {
+  const paramsData = await params;
+  const t = await getTranslations({ locale: paramsData.locale });
+
+  const { id: postId, locale } = await params;
+  const routes = routeFactory(t, locale);
+
+  const postData = await getPost(postId);
+
+  const breadcrumbItems = [
+    {
+      ...routes.blog,
+      href: routes.blog.route(),
+    },
+    { title: postData?.title },
+  ] as IBreadcrumbItem[];
+
+  return (
+    <main className="flex flex-col items-center justify-between">
+      <InnerPageBanner
+        title={t('pages_blog_title')}
+        imageSrc={images.blogBanner.src}
+      />
+      <div className="container-fluid mx-auto my-12 md:my-24">
+        <Breadcrumb items={breadcrumbItems} />
+        {postData.content && postData.content.length ? (
+          <ContentGenerator data={postData.content} className="mt-10" />
+        ) : (
+          <></>
+        )}
+      </div>
+    </main>
+  );
+}