// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React, { ReactNode, useState } from 'react';
// import styled from 'styled-components';
// import Breadcrumb from '../lib/Breadcrumb/Breadcrumb';
// import BreadcrumbItem from '../lib/Breadcrumb/BreadcrumbItem';
// import QQ from '../static/icons/qq.svg';
// import Sun from '../static/icons/sunny.svg';
// import Rain from '../static/icons/rain.svg';
// import Snow from '../static/icons/snow.svg';
// import Button from '../lib/Button/Button';
//
// const Wrap = styled.div`
//   > div {
//     margin-top: 20px;
//     margin-bottom: 10px;
//   }
// `;
//
// const Home: React.FC = () => {
//   const [data, setData] = useState<{ content: string; icon: ReactNode }[]>([
//     { content: 'Home', icon: <QQ fill="#008dff" width="1em" height="1em" /> },
//     { content: 'Application Center', icon: <Sun fill="#008dff" width="1em" height="1em" /> },
//     { content: 'Application List', icon: <Rain fill="#008dff" width="1em" height="1em" /> },
//     { content: 'Empty', icon: '' }
//   ]);
//   return (
//     <Wrap>
//       <Button
//         onClick={() => {
//           setData((state) => [
//             ...state,
//             { content: 'Add', icon: <Snow fill="#008dff" width="1em" height="1em" /> }
//           ]);
//         }}
//       >
//         添加
//       </Button>
//       <Breadcrumb
//         separator="/"
//         data={data}
//         renderItem={(item) => (
//           <BreadcrumbItem>
//             {item.icon}
//             <span>{item.content}</span>
//           </BreadcrumbItem>
//         )}
//       />
//     </Wrap>
//   );
// };
//
// export default Home;