inital commit

src/features/overview/overview.tsx

@@ -0,0 +1,38 @@
+import { ParentComponent, Index, mergeProps, Component } from 'solid-js';
+import { Hero } from '~/common/components/hero';
+import { List } from '~/common/components/list';
+import { emptyEntry } from '../content';
+import type { Entry, Category } from '../content';
+import { ListItem } from './list-item';
+import { css } from 'styled-system/css';
+
+type OverviewProps = {
+  highlight: Entry;
+  categories: Category[];
+};
+
+export function Overview(props: OverviewProps) {
+  const finalProps = mergeProps(
+    {
+      highlight: emptyEntry,
+      categories: [],
+    },
+    props,
+  );
+
+  return (
+    <div class={container}>
+      <Hero entry={finalProps.highlight}></Hero>
+
+      <Index each={finalProps.categories}>
+        {(category) => (
+          <List label={category().label} items={category().entries}>
+            {(entry) => <ListItem entry={entry()} />}
+          </List>
+        )}
+      </Index>
+    </div>
+  );
+}
+
+const container = css({ display: 'grid', gridAutoFlow: 'row', gap: '2em' });