fix: allow new lines in header

GoldElysium · Aug 10, 2024 · 35844c7 · 35844c7
1 parent 1b1a02e
commit 35844c7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/app/[lang]/(DynamicLayout)/forms/[id]/layout.tsx b/src/app/[lang]/(DynamicLayout)/forms/[id]/layout.tsx
@@ -18,6 +18,15 @@ interface IProps {
 export default async function RootLayout({ children, params: { id, lang } }: IProps) {
 	const form = await fetchForm(id, lang);
 
+	const descriptionSplit = (form?.description ?? '').split('\n');
+	const description = [];
+
+	for (let i = 0; i < descriptionSplit.length - 1; i++) {
+		description.push(descriptionSplit[i]);
+		description.push(<br />);
+	}
+	description.push(descriptionSplit[descriptionSplit.length - 1]);
+
 	return (
 		<body className={form ? skins[form.skin] ?? undefined : undefined}>
 			<DarkModeProvider>
@@ -31,7 +40,7 @@ export default async function RootLayout({ children, params: { id, lang } }: IPr
 				{form && (
 					<Header
 						title={form.name}
-						description={form.description}
+						description={description}
 						devprops={[]}
 					/>
 				)}

diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
@@ -1,8 +1,9 @@
-import { Project } from '@/types/payload-types';
+import type { Project } from '@/types/payload-types';
+import type { ReactNode } from 'react';
 
 interface IProps {
 	title: string;
-	description: string;
+	description: ReactNode;
 	devprops?: Project['devprops'];
 }
 
@@ -15,7 +16,7 @@ export default function ProjectHeader({ title, description, devprops }: IProps)
 			className="text-skin-header-foreground dark:text-skin-header-foreground-dark"
 		>
 			<div
-				className="grid h-72 w-full place-items-center bg-skin-header bg-cover bg-center bg-no-repeat px-4 py-2 dark:bg-skin-header-dark md:pt-12"
+				className="grid min-h-72 w-full place-items-center bg-skin-header bg-cover bg-center bg-no-repeat px-4 py-2 dark:bg-skin-header-dark md:pt-12"
 				style={background ? {
 					backgroundImage: background ? `url(${background.value})` : undefined,
 					height: '16rem',