Admin dashboard numbers refactor

To fetch the count numbers of posts, categories, users and comments and display in dashboard, create a hook and a component to render the data.

// hooks/useNumbers
import { useEffect, useState, useContext } from "react";
import { AuthContext } from "../context/auth";
import axios from "axios";

const useNumbers = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // state
  const [numbers, setNumbers] = useState({});
  // console.log("numbers", numbers);

  useEffect(() => {
    if (auth?.token) getNumbers();
  }, [auth?.token]);

  const getNumbers = async () => {
    try {
      const { data } = await axios.get("/numbers");
      console.log(data);
      setNumbers(data);
    } catch (err) {
      console.log(err);
    }
  };

  return { numbers };
};

export default useNumbers;

// components/pages/RenderProgress
import { Progress } from "antd";
import CountTo from "react-count-to";
import Link from "next/link";

const RenderProgress = ({
  color1 = "#8c1aff",
  color2 = "#ff6600",
  number,
  name,
  link = "#",
}) => (
  <Link href={link}>
    <a>
      <Progress
        type="circle"
        strokeColor={{
          "0%": color1,
          "100%": color2,
        }}
        percent={100}
        format={() => <CountTo to={number} speed={number * 100} />}
      />
      <p style={{ marginTop: 10 }}> {name}</p>
    </a>
  </Link>
);

export default RenderProgress;

// pages/admin/index
import { Row, Col, Divider } from "antd";
import AdminLayout from "../../components/layout/AdminLayout";
import RenderProgress from "../../components/pages/RenderProgress";
import useNumbers from "../../hooks/useNumbers";

const Admin = () => {
  const { numbers } = useNumbers();

  return (
    <AdminLayout>
      <Row>
        <Col span={24}>
          <Divider>
            <h1>Statistics</h1>
          </Divider>
        </Col>
      </Row>
      <Row>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.posts}
            name="Posts"
            link="/admin/posts"
          />
        </Col>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.categories}
            name="Categories"
            link="/admin/categories"
          />
        </Col>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.comments}
            name="Comments"
            link="/admin/comments"
          />
        </Col>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.users}
            name="Users"
            link="/admin/users"
          />
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default Admin;