import { createElement, render } from 'rax';
import { Icon } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

const ICON_LIST = [
  'add',
  'minus',
  'select',
  'close',
  'search',
  'ashbin',
  'semi-select',
  'error',
  'prompt',
  'success',
  'warning',
  'help',
  'arrow-left',
  'arrow-right',
  'arrow-up',
  'arrow-down',
  'arrow-double-left',
  'arrow-double-right',
  'triangle-arrow-up',
  'triangle-arrow-down',
  'triangle-arrow-left',
  'triangle-arrow-right',
  'toggle-left',
  'toggle-right',
  'loading',
  'asterisk',
  'upload',
  'download',
  'exit',
  'picture',
  'ellipsis',
  'calendar',
  'list',
  'chart-pie',
  'chart-bar',
  'detail',
  'dashborad',
  'unlock',
  'lock',
  'set',
  'filter',
  'eye',
  'eye-close',
  'copy',
  'email',
  'attachment',
  'edit',
  'account',
  'refresh',
  'smile',
  'cry',
  'switch',
  'ascending',
  'descending',
  'sorting',
  'picture',
  'form',
  'add-square',
  'play-filling',
  'heart-filling',
  'prompt-filling',
  'favorites-filling',
  'warning-filling',
  'success-filling',
  'delete-filling',
];

const DrawerDemo = () => {
  return (
    <View>
      <Text className="demo-title">icon</Text>
      <View className="demo-content icon-list">
        {ICON_LIST.map((icon) => {
          return (
            <View className="icon-item" key="icon">
              <Icon className="icon" size="large" type={icon} />
              <Text numberOfLines={2} className="icon-name">
                {icon}
              </Text>
            </View>
          );
        })}
      </View>
    </View>
  );
};
// render(<DrawerDemo />, null, { driver: DU });
 export default DrawerDemo