PageLayout.tsx

import paragraph from '@digdir/designsystemet-css/baseline/typography/paragraph.module.css';
import { Heading, Link } from '@digdir/designsystemet-react';
import { ArrowLeftIcon } from '@navikt/aksel-icons';
import { Container } from '@repo/components';
import cl from 'clsx/lite';
import NextLink from 'next/link';
import type * as React from 'react';

import { MdxContent } from '../../components';

import classes from './PageLayout.module.css';

interface PageLayoutProps {
  content: React.ReactNode;
  data: PageLayoutData;
}

type PageLayoutData = {
  title: string;
  date: string;
  author: string;
  backText: string;
  backUrl: string;
};

const PageLayout = ({ content, data }: PageLayoutProps) => {
  return (
    <main id='main'>
      <div className={classes.header}>
        <Container>
          <div className={classes.headerContent}>
            <Link asChild className={classes.backBtn} color='neutral'>
              <NextLink href={'/' + data.backUrl} prefetch={false}>
                <ArrowLeftIcon title='Tilbake' fontSize={28} />
                {data.backText}
              </NextLink>
            </Link>
            <div
              className={cl(classes.meta, paragraph['ds-paragraph-short--lg'])}
            >
              <span>{data.author && <div>{data.author}</div>}</span>
              <span className={classes.separator}> - </span>
              <span>{data.date && <div>{data.date}</div>}</span>
            </div>
            <Heading level={1} size='lg' className={classes.title}>
              {data.title}
            </Heading>
          </div>
        </Container>
      </div>
      <Container className={classes.container}>
        <div className={classes.content}>
          <MdxContent>{content}</MdxContent>
        </div>
      </Container>
    </main>
  );
};

export { PageLayout };