ReactJS

1
import React from 'react';
2
import styles from './menuitemlist.css';
3
import {EColors, Text} from '../../../../Text';
4
import classNames from "classnames";
5
import {EIcons, Icon} from "../../../../Icon";
6

7
interface IMenuItemsListProps {
8
  postId: string;
9
}
10

11
export function MenuItemList({postId}: IMenuItemsListProps) {
12
  const onlyDesktopMenuItem = classNames(styles.menuItem, styles.menuItemHideForMobile)
13
  return (
14
    <ul className={styles.menuItemsList}>
15
      <li className={onlyDesktopMenuItem}>
16
        <Icon name={EIcons.comment}/>
17
        <Text size={12} color={EColors.grey99}>Комментарии</Text>
18
      </li>
19
      <div className={styles.divider}/>
20

21
      <li className={onlyDesktopMenuItem}>
22
        <Icon name={EIcons.share}/>
23
        <Text size={12} color={EColors.grey99}>Поделиться</Text>
24
      </li>
25

26
      <div className={styles.divider}/>
27

28
      <li className={styles.menuItem} onClick={()=> console.log(postId)}>
29
        <Icon name={EIcons.block}/>
30
        <Text size={12} color={EColors.grey99}>Скрыть</Text>
31
      </li>
32

33
      <div className={styles.divider}/>
34

35
      <li className={onlyDesktopMenuItem}>
36
        <Icon name={EIcons.save}/>
37
        <Text size={12} color={EColors.grey99}>Сохранить</Text>
38
      </li>
39

40
      <div className={styles.divider}/>
41

42
      <li className={styles.menuItem}>
43
        <Icon name={EIcons.warning}/>
44
        <Text size={12} color={EColors.grey99}>Пожаловаться</Text>
45
      </li>
46
    </ul>
47
  );
48
}
49