import { createElement } from 'rax';
import View from 'rax-view';
import Link from 'rax-link';
import { List } from '@alifd/meet';

const list = require('./list.json');

const itemLinkStyle = {
  display: 'flex',
  flexDirection: 'row',
  alignItem: 'center',
  justifyContent: 'flex-start',
  flex: 1,
  height: '100%',
};

const Home = () => {
  return (
    <View>
      <List>
        {list.map((it) => {
          return (
            <List.Item key={it}>
              <Link miniappHref={`navigate:/pages/${it}/index`} href={`#${it}`} style={itemLinkStyle}>
                <List.ItemTitle>{it}</List.ItemTitle>
              </Link>
            </List.Item>
          );
        })}
      </List>
    </View>
  );
};

export default Home;