MDX layouts not respecting line breaks.
import { Anton } from "next/font/google";
const anton = Anton({subsets: ["latin"], weight:["400"]});
export default function MdxLayout({ children }: { children: React.ReactNode }) {
return (
<>
<div className="flex flex-row h-full w-full space-x-5">
{/* Table of contents */}
<div className="h-full w-1/6">
<h1 className={`${anton.className} text-white`}>
Table of contents
</h1>
</div>
{/* The content */}
<div className="flex flex-row w-full" style={{ color: 'red' }}>
{children}
</div>
</div>
</>
)
}
And this is my mdx page
---
title: Hi, Test!
description: test??
tags: frameworks,development
image: react.png
slug: 2024/test
publishDate: '06-10-2024'
---
import MdxLayout from '@/components/mdx-layout'
export const metadata = {
title: 'Test!',
description: 'this is the description',
tags: ['test', 'development'],
};
# Title {metadata.title}
# description {metadata.description}
# tags {metadata.tags}
You this cool?
export default function MDXPage({ children }) {
return <MdxLayout>{children}</MdxLayout>
}
The thing is the markdown is being rendered in a single line, that is like this
Title Test!description this is the descriptiontags testdevelopmentYou this cool?
Like this but in a single line. how can i make the it respect the new lines that i have in my markdown file?
Thanks.