resume

1
import { Component, For } from 'solid-js';
2
import { Text, useTheme } from '@uikit';
3
import { createThemeInvoker } from '@shared/themeInvoker';
4
import { Education } from '@shared/data';
5
import { format } from 'date-fns';
6
import styles from './EducationList.module.sass';
7
import { Theme } from '../../types/theme';
8

9
type EducationListProps = {
10
  data: Education[];
11
  theme?: Theme;
12
};
13

14
const programmListPeriodThemeInvoker = createThemeInvoker(styles, 'ProgrammList__period');
15

16
const EducationList: Component<EducationListProps> = (props) => {
17
  const { globalTheme } = useTheme();
18
  const theme = () => props.theme ?? globalTheme() ?? Theme.LIGHT;
19

20
  return (
21
    <ul class={styles.EducationList}>
22
      <For each={props.data.reverse()}>{(education) => (
23
        <li class={styles.EducationList__item}>
24
          <h3 class={styles.EducationList__institution}>
25
            {education.institution.name}
26
          </h3>
27
          <ul class={styles.ProgrammList}>
28
            <For each={education.education.reverse()}>{(programm) => (
29
              <li class={styles.ProgrammList__item}>
30
                <Text
31
                  classList={{
32
                    [styles.ProgrammList__period]: true,
33
                    [programmListPeriodThemeInvoker[theme()]]: true,
34
                  }}
35
                >
36
                  <time>{format(programm.startDate, 'yyyy')}</time> –{' '}
37
                  <time>{format(programm.endDate, 'yyyy')}</time>
38
                </Text>
39
                <div>
40
                  <h4 class={styles.ProgrammList__degree}>{programm.degree}</h4>
41
                  <Text class={styles.ProgrammList__faculty}>
42
                    {programm.faculty?.name},
43
                  </Text>
44
                  <Text class={styles.ProgrammList__speciality}>
45
                    {programm.speciality}.
46
                  </Text>
47
                </div>
48
              </li>
49
            )}</For>
50
          </ul>
51
        </li>
52
      )}</For>
53
    </ul>
54
  );
55
};
56

57
export default EducationList;
58