38 lines
1,002 B
TypeScript
38 lines
1,002 B
TypeScript
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' });
|