120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
|
|
import { colors } from 'ts/style/colors';
|
|
import { styled } from 'ts/style/theme';
|
|
|
|
interface IGroupProps {
|
|
heading: string;
|
|
name: string;
|
|
filters: IFilterProps[];
|
|
}
|
|
|
|
interface IFilterProps {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
const groups: IGroupProps[] = [
|
|
{
|
|
heading: 'Topic',
|
|
name: 'topic',
|
|
filters: [
|
|
{
|
|
value: 'mesh',
|
|
label: 'Mesh',
|
|
},
|
|
{
|
|
value: 'testing',
|
|
label: 'Testing',
|
|
},
|
|
{
|
|
value: 'mesh',
|
|
label: 'Mesh',
|
|
},
|
|
{
|
|
value: 'testing',
|
|
label: 'Testing',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
heading: 'Level',
|
|
name: 'level',
|
|
filters: [
|
|
{
|
|
value: 'beginner',
|
|
label: 'Beginner',
|
|
},
|
|
{
|
|
value: 'intermediate',
|
|
label: 'Intermediate',
|
|
},
|
|
{
|
|
value: 'advanced',
|
|
label: 'Advanced',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export const ChapterLinks: React.FC = () => {
|
|
return (
|
|
<ChapterLinksWrapper>
|
|
{groups.map(({ heading, name, filters }: IGroupProps, groupIndex) => (
|
|
<ChapterGroupWrapper key={`filter-group-${groupIndex}`}>
|
|
<ChapterLink href="#index" hasChildren={filters.length > 0}>
|
|
{heading}
|
|
</ChapterLink>
|
|
<ChapterChildren>
|
|
{filters.map(({ value, label }: IFilterProps, filterIndex) => (
|
|
<ChapterSublink
|
|
href={`#filter-${name}-${filterIndex}`}
|
|
key={`filter-${name}-${filterIndex}`}
|
|
data-level="2"
|
|
>
|
|
{label}
|
|
</ChapterSublink>
|
|
))}
|
|
</ChapterChildren>
|
|
</ChapterGroupWrapper>
|
|
))}
|
|
</ChapterLinksWrapper>
|
|
);
|
|
};
|
|
|
|
const ChapterLinksWrapper = styled.ul`
|
|
position: relative;
|
|
`;
|
|
|
|
const ChapterGroupWrapper = styled.li`
|
|
margin-bottom: 1.111em;
|
|
`;
|
|
|
|
const ChapterLink = styled.a<{ hasChildren?: boolean }>`
|
|
margin-bottom: ${props => props.hasChildren && '1rem'};
|
|
color: ${colors.textDarkSecondary};
|
|
display: block;
|
|
font-size: 0.8333rem;
|
|
`;
|
|
|
|
const ChapterSublink = styled(ChapterLink)`
|
|
font-size: 0.7222rem;
|
|
line-height: 1.45;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 0.555555556rem;
|
|
}
|
|
`;
|
|
|
|
// const ChapterGroupWrapper = styled(Heading)`
|
|
// color: ${colors.textDarkPrimary};
|
|
// font-size: 1rem !important;
|
|
// font-weight: 400 !important;
|
|
// margin-bottom: 1em !important;
|
|
// `;
|
|
|
|
const ChapterChildren = styled.div`
|
|
border-left: 1px solid #e3e3e3;
|
|
padding-left: 0.7rem;
|
|
`;
|