chore: add a SectionedLayout component

1 files changed, 43 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..36ca039
--- /dev/null
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -0,0 +1,43 @@
+import Section, {
+  type SectionProps,
+  type SectionVariant,
+} from '@components/atoms/layout/section';
+import { FC } from 'react';
+import Layout from '../layout/layout';
+
+export type Section = Pick<SectionProps, 'content' | 'title'>;
+
+export type SectionedLayoutProps = {
+  /**
+   * An array of objects describing each section.
+   */
+  sections: Section[];
+};
+
+/**
+ * SectionedLayout component
+ *
+ * Render a sectioned layout.
+ */
+const SectionedLayout: FC<SectionedLayoutProps> = ({ 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 <Layout>{getSections(sections)}</Layout>;
+};
+
+export default SectionedLayout;