🚀 release v3.0.0

client/templates/Onyx/Onyx.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+import Markdown from '@/components/shared/Markdown';
+import { useAppSelector } from '@/store/hooks';
+import { PageProps } from '@/utils/template';
+
+import { getSectionById } from '../sectionMap';
+import styles from './Onyx.module.scss';
+import Masthead from './widgets/Masthead';
+import Section from './widgets/Section';
+
+const Onyx: React.FC<PageProps> = ({ page }) => {
+  const isFirstPage = useMemo(() => page === 0, [page]);
+
+  const { summary } = useAppSelector((state) => state.resume.basics);
+  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
+
+  return (
+    <div className={styles.page}>
+      {isFirstPage && (
+        <div className="mb-4 grid gap-4 border-b pb-4">
+          <Masthead />
+          <Markdown>{summary}</Markdown>
+        </div>
+      )}
+
+      <div className={styles.container}>
+        <div className={styles.main}>{layout[0].map((key) => getSectionById(key, Section))}</div>
+        <div className={styles.sidebar}>{layout[1].map((key) => getSectionById(key, Section))}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Onyx;