import { NewItem, Preview } from './Preview'; import './List.scss'; import { useGetTemplatesQuery } from '../../Api/api'; import { Col, Row, Skeleton } from 'antd'; import Scrollbars from 'react-custom-scrollbars-2'; import { GithubFilled } from '@ant-design/icons'; const List = () => { const { data, isLoading, isError, isSuccess } = useGetTemplatesQuery(); return ( <Scrollbars autoHide={true} style={{ height: '100%' }}> <div className="template"> <Row align="middle" justify="center" className="header"> <Col span={24}> <Row align="middle" justify="center"> <Col> <span className="title">Dnde</span> </Col> </Row> </Col> <Col span={24}> <Row align="middle" justify="center"> <Col style={{ textAlign: 'center' }}> <span className="subtitle"> Drag and Drop Editor tailored for <b>Mails</b> </span> </Col> </Row> </Col> <Col style={{ paddingTop: '24px' }} span={24}> <Row align="middle" justify="center"> <Col className="info" md={24} lg={10} style={{ textAlign: 'center' }}> <span> All features are optimised for mails, work flexibly through import/export, with responsive design for all devices. </span> <br /> <a target="_blank" href="https://github.com/aghontpi/dnde"> <span> Check it on Github <GithubFilled style={{ position: 'relative', top: '4px', fontSize: '32px' }} /> </span> </a> </Col> </Row> </Col> </Row> <Row className="choose-template" align="middle" gutter={[0, 8]} justify="center"> <Col span={16}> <span className="title">Choose a template and get started.</span> </Col> <Col span={16}> <span className="subtitle">All templates are redesigned in dnde, using original mail as reference.</span> </Col> </Row> <Row justify="center" className="template-list" gutter={[0, 40]}> <Col lg={6}> <NewItem /> </Col> {isLoading && [1, 2].map((item, key) => { return ( <Col xs={24} md={12} lg={6} style={{ textAlign: 'center' }}> <Preview key={key} id={'8x93dummy'} skeleton={ <> <Skeleton active={true} /> <Skeleton active={true} /> </> } /> </Col> ); })} {isSuccess && data ? data.response.map((item, key) => { return ( <Col lg={6}> <Preview key={key} id={item.docRef} image={item.preview} /> </Col> ); }) : null} </Row> </div> </Scrollbars> ); }; export { List };