refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 60 insertions, 0 deletions

diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
new file mode 100644
index 0000000..f91c354
--- /dev/null
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -0,0 +1,60 @@
+import Section, {
+  type SectionProps,
+  type SectionVariant,
+} from '@components/atoms/layout/section';
+import Script from 'next/script';
+import { FC } from 'react';
+import { BreadcrumbList } from 'schema-dts';
+
+export type Section = Pick<SectionProps, 'content' | 'title'>;
+
+export type SectionedLayoutProps = {
+  /**
+   * The breadcrumb JSON schema.
+   */
+  breadcrumbSchema: BreadcrumbList['itemListElement'][];
+  /**
+   * An array of objects describing each section.
+   */
+  sections: Section[];
+};
+
+/**
+ * SectionedLayout component
+ *
+ * Render a sectioned layout.
+ */
+const SectionedLayout: FC<SectionedLayoutProps> = ({
+  breadcrumbSchema,
+  sections,
+}) => {
+  const getSections = (items: SectionProps[]) => {
+    return items.map((section, index) => {
+      const variant: SectionVariant = index % 2 ? 'light' : 'dark';
+      const isLastSection = index === items.length - 1;
+
+      return (
+        <Section
+          key={`section-${index}`}
+          title={section.title}
+          content={section.content}
+          variant={variant}
+          withBorder={!isLastSection}
+        />
+      );
+    });
+  };
+
+  return (
+    <>
+      <Script
+        id="schema-breadcrumb"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+      {getSections(sections)}
+    </>
+  );
+};
+
+export default SectionedLayout;