/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import Page from 'nuke-page';
import Link from 'nuke-link';

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
    };
  }

  render() {
    return (
      <Page title="Link">
        <Page.Intro main="普通跳转" />
        <Link style={styles.linkItem} activeStyle={styles.activeStyle} target="_blank" href="https://m.taobao.com">新窗口跳转到h5页面</Link>
        <Link style={styles.linkItem} activeStyle={styles.activeStyle} href="qap:///next.js">跳转到 qap://next.js 页面</Link>
        <Page.Intro main="常见协议支持" />
        <Link style={styles.linkItem} activeStyle={styles.activeStyle} href="mailto:yichen.hww@alibaba-inc.com">支持 mailto: 协议</Link>
        <Link style={styles.linkItem} activeStyle={styles.activeStyle} href="sms:10086">
          <Text style={[styles.linkInnerText, { color: '#666666' }]}>支持 sms: </Text>
          <Text style={[styles.linkInnerText, { color: '#EB7E10' }]}>10086</Text>
        </Link>
      </Page>

    );
  }
};
const styles = {
  linkItem: {
    flexDirection: 'row',
    marginTop: '30rem',
    fontSize: '28rem',
    marginLeft: '42rem',
    color: '#3089dc',
  },
  activeStyle: {
    color: 'red',
  },
  linkInnerText: {
    fontSize: '28rem',
    color: '#3089dc',
  },
  linkItemText: {
    fontSize: '36rem',
    color: '#EB7E10',
  },

};

render(<App />);