import Loadable from "react-loadable";

export const components = [
  {
    name: "change-log",
    label: "Change Log",
    description: () => require("Components/changeLog/description.md"),
    changeLog: () => require("Components/changeLog/changeLog.md"),
  },
  {
    name: "component",
    label: "Component",
    icon: "",
    components: [
      {
        name: "general",
        label: "General",
        child: [
          {
            name: "calendar-table",
            label: "Calendar Table",
            image: "",
            description: "Calendar Table for PEP project",
            spanColExample: 24,
            whenToUse: () =>
              require("Components/FormDesign/document/whenToUse.md"),
            examples: [
              {
                title: "Basic",
                col: 0,
                markdown: () =>
                  require("Components/FormDesign/document/basic/description.md"),
                previewCode: () =>
                  require("Components/FormDesign/document/basic/index.md"),
                path: Loadable({
                  loader: () =>
                    import("Components/FormDesign/document/basic/index.jsx"),
                  loading: () => {
                    return null;
                  },
                }),
              },
            ],
            property: () =>
              require("Components/FormDesign/document/property.md"),
          },
        ],
      },
    ],
  },
];