Snippets Collections
import React from "react";
import { Col, Card, Row, Statistic } from "antd";

class Workplace extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      DataisLoaded: false,
    };
  }

  componentDidMount() {
    fetch("http://localhost:3005/results")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          items: json,
          DataisLoaded: true,
        });
      });
  }

  render() {
    const { DataisLoaded, items } = this.state;
    if (!DataisLoaded) return <div>Give me time</div>;

    return (
      <div className="import-container">
        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
          
        </Row>
      </div>
    );
  }
}

export default Workplace;
import { Row, Col, Card, Statistic } from "antd";

const CardRow = ({ info }) => {
  return (
    <>
      {info.map((n) => (
        <Col key={n.key} className="gutter-row" span={8}>
          <Card
            className="campaign-card-row"
            hoverable={true}
            style={{ marginBottom: "10px" }}
          >
            <div className="campaign-card-title">
              <span>{n.name}</span>
            </div>
            <Statistic value={n.salary} prefix={"$"} />
          </Card>
        </Col>
      ))}
    </>
  );
};

export default CardRow;
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;
star

Fri Apr 08 2022 15:23:35 GMT+0000 (UTC)

#antd #react.js
star

Fri Apr 08 2022 15:23:09 GMT+0000 (UTC)

#antd #react.js
star

Fri Apr 08 2022 15:22:28 GMT+0000 (UTC)

#antd #react.js

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension