resume

1
import { Component, JSX } from 'solid-js';
2
import { Text, useTheme } from '@uikit';
3
import { createThemeInvoker } from '@shared/themeInvoker';
4
import styles from './Header.module.sass';
5
import { Theme } from '@types';
6

7
export type HeaderProps = {
8
  description?: JSX.Element | string;
9
  children?: JSX.Element | string;
10
  faceSrc?: string;
11
  title: JSX.Element;
12
  theme?: Theme;
13
};
14

15
const headerThemeInvoker = createThemeInvoker(styles, 'Header');
16

17
const Header: Component<HeaderProps> = (props) => {
18
  const { globalTheme } = useTheme();
19
  const componentTheme = () => props.theme ?? globalTheme() ?? 'light';
20

21
  return (
22
    <header classList={{ [styles.Header]: true }}>
23
      <div class={styles.Header__wrapper}>
24
        <h1 classList={{ [styles.Header__title]: true, [headerThemeInvoker[componentTheme()]]: true }}>
25
          {props.title}
26
        </h1>
27
        <Text>{props.description}</Text>
28
      </div>
29
      <img class={styles.Header__face} height={128} width={128} src={props.faceSrc ?? ''} alt='Фото профиля'/>
30
    </header>
31
  );
32
};
33

34
export default Header;
35