71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
import { graphql } from "@/gql";
|
|
import { type PageSectionBlockFragment } from "@/gql/graphql";
|
|
import styles from "./pageSection.module.scss";
|
|
import { Blocks } from "./Blocks";
|
|
import slugify from "@sindresorhus/slugify";
|
|
import { DecorativeIcon } from "../general/Icon";
|
|
|
|
const PageSectionBlockFragmentDefinition = graphql(`
|
|
fragment PageSectionBlock on PageSectionBlock {
|
|
title
|
|
backgroundColor
|
|
icon
|
|
body {
|
|
id
|
|
blockType
|
|
}
|
|
}
|
|
`);
|
|
|
|
export const PageSectionBlock = ({
|
|
block,
|
|
}: {
|
|
block: PageSectionBlockFragment;
|
|
}) => {
|
|
const anchor = slugify(block.title);
|
|
|
|
return (
|
|
<section
|
|
className={styles.pageSection}
|
|
data-background-color={block.backgroundColor}
|
|
>
|
|
<div className={styles.anchor} id={anchor}></div>
|
|
<div className={styles.sectionHeader}>
|
|
<div className={styles.icon}>
|
|
{block.icon && <DecorativeIcon type={block.icon} />}
|
|
</div>
|
|
<h2>{block.title}</h2>
|
|
</div>
|
|
<Blocks blocks={block.body} />
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export const PageSectionNavigationBlock = ({
|
|
sections,
|
|
}: {
|
|
sections: PageSectionBlockFragment[];
|
|
}) => {
|
|
if (!sections.length) {
|
|
return <></>;
|
|
}
|
|
return (
|
|
<div className="anchorLinks">
|
|
<span className="suphead">Hopp til</span>
|
|
<ul>
|
|
{sections.map((section) => {
|
|
const anchor = slugify(section.title);
|
|
|
|
return (
|
|
<li key={anchor}>
|
|
<a href={`#${anchor}`} className="button">
|
|
{section.title}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|