import { useEffect, useState } from "react"; import { Row, Col, Card, Skeleton, Statistic } from "antd"; import CardRow from "../../components/CardRow"; import { SettingOutlined, EditOutlined, EllipsisOutlined, } from "@ant-design/icons"; const { Meta } = Card; const Workplace = () => { const [info, setInfo] = useState(null); const [isLoading, setLoading] = useState(true); useEffect(() => { setTimeout(() => { fetch("http://localhost:3005/results") .then((res) => { return res.json(); }) .then((data) => { setInfo(data); setLoading(false); }); }, 1000); }, []); return ( <div className="import-container"> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> {isLoading && ( <Col span={8} className="gutter-row"> <Card className="campaign-card-row" hoverable={true} style={{ marginBottom: "10px" }} > <Skeleton loading={isLoading} active> <div className="campaign-card-title"> <span>{"Silly"}</span> </div> <Statistic value={30000} prefix={"$"} /> </Skeleton> </Card> </Col> )} {info && <CardRow info={info} />} {/* conditional templating:: only if data is true, will the cardrow output */} </Row> </div> ); }; export default Workplace;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter