Intlayer

import { AsideNavigation } from '@components/DocPage/AsideNavigation/AsideNavigation'; import type { LocalesValues } from 'intlayer'; import type { FC, ReactNode } from 'react'; import { BlogBreadCrumb } from './BlogBreadCrumb'; import { BlogNavList } from './BlogNavList'; import { getBlogData } from './blogData'; type BlogPageLayoutProps = { children?: ReactNode; activeSlugs?: string[]; locale: LocalesValues; displayAsideNavigation?: boolean; }; export const BlogPageLayout: FC<BlogPageLayoutProps> = ({ children, locale, activeSlugs = [], displayAsideNavigation = true, }) => { const blogData = getBlogData(locale); return ( <div className="flex max-w-screen flex-1 border-b-[0.5px] bg-card max-md:flex-col"> <aside className="z-10 flex-none"> <BlogNavList blogData={blogData} activeSlugs={['blog', ...activeSlugs]} /> </aside> <div className="flex flex-1 flex-row"> <article className="relative mb-3 h-full max-h-screen w-auto flex-1 grow overflow-auto rounded-xl bg-background px-4 pb-24 max-md:pl-16 md:max-h-[calc(100vh-4rem)] md:px-10" id="content" > <div className="m-auto max-w-3xl"> <BlogBreadCrumb className="mt-12 ml-10" activeSections={activeSlugs} blogData={blogData} locale={locale} /> {children} </div> </article> <aside className="flex-none max-lg:hidden"> {displayAsideNavigation && <AsideNavigation />} </aside> </div> </div> ); };