resume

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

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

14
const jobListPeriodThemeInvoker = createThemeInvoker(styles, 'JobList');
15

16
const formatTypeOfEmployment = (typeOfEmployment: string) => {
17
  if (typeOfEmployment === 'distant') {
18
    return 'удаленная работа';
19
  }
20
  return typeOfEmployment;
21
};
22

23
const JobList: Component<JobListProps> = (props) => {
24
  const { globalTheme } = useTheme();
25
  const theme = () => props.theme ?? globalTheme() ?? Theme.LIGHT;
26
  return (
27
    <ul class={styles.JobList}>
28
      <For each={props.data.reverse()}>{(job) => (
29
        <>
30
          <li class={styles.JobList__item}>
31
            <Text
32
              classList={{
33
                [styles.JobList__period]: true,
34
                [jobListPeriodThemeInvoker[theme()]]: true,
35
              }}
36
            >
37
              <time>
38
                {format(job.startDate, 'MM.yyyy')}
39
              </time>
40
              {' – '}
41
              {job.endDate === 'present'
42
                ? <span>настоящее время</span>
43
                : <time dateTime={format(job.endDate, 'MM.yyyy')}>{format(job.endDate, 'MM.yyyy')}</time>}
44
            </Text>
45
            <div>
46
              <h3 class={styles.JobList__employer}>
47
                {job.employer.name}
48
              </h3>
49
              <Text>{job.vacancy}, {formatTypeOfEmployment(job.typeOfEmployment)}.</Text>
50
              <br/>
51
              <Text><b>Обязанности:</b></Text>
52
              <ul class={styles.ResponsibilitiesList}>
53
                {<For each={job.responsibilities}>{(responsibility) => (
54
                  <li>
55
                    {responsibility}
56
                  </li>
57
                )}</For>}
58
              </ul>
59
            </div>
60
          </li>
61
        </>
62
      )}</For>
63
    </ul>
64
  );
65
};
66

67
export default JobList;
68