import React, { useState } from 'react';
import styles from './style/index.module.less';
import CustomCard from '@/components/CustomCard/index';
import CompCard from './compCard';
import { menu } from './test/data';
import { Tabs, Input, Select } from '@arco-design/web-react';

const TabPane = Tabs.TabPane;
const InputSearch = Input.Search;

function ComponentMarket() {
  return (
    <>
      <div className={styles['comp-market-container']}>
        <CustomCard>
          {/*公用搜索*/}
          <div className={styles['comp-market-header']}>
            <div className={styles['comp-market-search']}>
              <Input.Group compact>
                <Select size="large" defaultValue="全部" style={{ width: '25%' }}>
                  {menu.map((item, index) => {
                    return (
                      <Select.Option key={index} value={item.dictValue}>{item.dictValue}</Select.Option>
                    );
                  })}
                </Select>
                <InputSearch size="large" placeholder="请输入组件名、关键词进行搜索" style={{ width: '75%' }} />
              </Input.Group>
            </div>
          </div>
          {/*单类型数据渲染*/}
          <Tabs key="card" tabPosition="left">
            {menu.map((item) => {
              return (
                <TabPane key={item.id} title={item.dictValue}>
                  <CompCard componentClassify={item.dictValue}></CompCard>
                </TabPane>
              );
            })}
          </Tabs>
        </CustomCard>
      </div>
    </>
  );
}

export default ComponentMarket;