Merge pull request #376 from GoldElysium/hotfix/project-header

public/locales/en/project.json

@@ -1,5 +1,6 @@
 {
 	"page": {
+		"description": "Description",
 		"links": "Links",
 		"submissions": "Submissions",
 		"loading": "Loading submissions..."

src/app/[lang]/(DynamicLayout)/projects/[slug]/layout.tsx

@@ -3,6 +3,7 @@ import Navbar from 'ui/Navbar';
 import Footer from 'ui/Footer';
 import PayloadResponse from 'types/PayloadResponse';
 import { Flag, Project } from 'types/payload-types';
+import ProjectHeader from '../../../../../ui/ProjectHeader';
 
 interface IProps {
 	children: React.ReactNode;
@@ -11,37 +12,50 @@ interface IProps {
 	}
 }
 
-async function getFlags(slug: string): Promise<string[]> {
+interface PropsProject {
+	flags: string[];
+	title: string;
+	description: string;
+}
+
+async function getProject(slug: string): Promise<PropsProject | null> {
 	const res = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL!}/api/projects?where[slug][like]=${slug}&depth=2`, {
 		headers: {
 			'X-RateLimit-Bypass': process.env.PAYLOAD_BYPASS_RATE_LIMIT_KEY ?? undefined,
 			Authorization: process.env.PAYLOAD_API_KEY ? `users API-Key ${process.env.PAYLOAD_API_KEY}` : undefined,
 		} as Record<string, string>,
 	});
 	const parsedRes = (await res.json() as PayloadResponse<Project>);
-	if (parsedRes.totalDocs === 0) return [];
+	if (parsedRes.totalDocs === 0) return null;
 
 	const project = parsedRes.docs[0];
 
-	return (project.flags as Flag[] ?? []).map((flag) => flag.code);
+	return {
+		title: project.title,
+		description: project.shortDescription,
+		flags: (project.flags as Flag[] ?? []).map((flag) => flag.code),
+	};
 }
 
 export default async function RootLayout({ children, params: { slug } }: IProps) {
-	let flags: string[] = [];
+	let project: PropsProject | null = null;
 
 	if (slug) {
-		flags = await getFlags(slug);
+		project = await getProject(slug);
 	}
 
 	return (
 		<>
-			{/* @ts-ignore */}
-			<Navbar flags={flags} />
+			<Navbar flags={project?.flags ?? []} />
+			{
+				project && (
+					<ProjectHeader title={project.title} description={project.description} />
+				)
+			}
 			<main>
 				{children}
 			</main>
-			{/* @ts-ignore */}
-			<Footer flags={flags} />
+			<Footer flags={project?.flags ?? []} />
 		</>
 	);
 }

src/app/[lang]/(DynamicLayout)/projects/[slug]/page.tsx

@@ -109,6 +109,9 @@ export default async function ProjectPage({ params: { slug, lang } }: IProps) {
 				<div className="flex-grow">
 					<div className="mb-16 mt-4 w-full flex flex-col items-center">
 						<div className="max-w-full w-full sm:!max-w-4xl px-4 break-words md:break-normal">
+							<TextHeader>
+								{t('description')}
+							</TextHeader>
 							<div className="description-body">
 								{DescriptionSerializer(project.description)}
 							</div>

src/ui/ProjectHeader.tsx

@@ -0,0 +1,18 @@
+interface IProps {
+	title: string,
+	description: string,
+}
+
+export default function ProjectHeader({ title, description }: IProps) {
+	return (
+		<div
+			className="w-full px-4 py-2 flex pb-4 justify-center items-center text-center
+		  bg-skin-background-2 dark:bg-skin-dark-background-2 text-white"
+		>
+			<div className="max-w-4xl flex flex-col">
+				<h1 className="text-5xl text-bold">{title}</h1>
+				<p className="text-white text-opacity-80 text-2xl my-4">{description}</p>
+			</div>
+		</div>
+	);
+}