import React from 'react';
import styles from './style/index.module.less';
import CustomCard from '@/components/CustomCard/index';
import CollapseBox from './collapseBox';
import { Space, Input, Button, Tabs, Tag } from '@arco-design/web-react';

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

function ComponentLibrary() {
  return (
    <>
      <div className={styles['comp-library-container']}>
        <CustomCard>
          <Space
            size={20}
            style={{ marginBottom: '5px' }}
          >
            <InputSearch allowClear placeholder="输入名称搜索组件" style={{ width: 350 }} />
            <Button type="primary">组件推荐</Button>
          </Space>
          <Tabs defaultActiveTab="1">
            <TabPane
              key="1"
              title={
                <span>
                  <span>我的组件</span>
                  <Tag color="arcoblue">
                    216
                  </Tag>
                </span>
              }
            >
              <CollapseBox componentType="myLibs" />
            </TabPane>
            <TabPane
              key="2"
              title={
                <span>
                  <span>公开组件</span>
                  <Tag color="arcoblue">
                    31
                  </Tag>
                </span>
              }>
              <CollapseBox componentType="pubLibs" />
            </TabPane>
            <TabPane
              key="3"
              title={
                <span>
                  <span>协同组件</span>
                  <Tag color="arcoblue">
                    0
                  </Tag>
                </span>
              }
            >
              <CollapseBox componentType="teamLibs" />
            </TabPane>
          </Tabs>
        </CustomCard>
      </div>
    </>
  );
}

export default ComponentLibrary;