import { ReactElement } from "react"; import useSWR from "swr"; import { observer } from "mobx-react-lite"; // layouts import { InstanceAdminLayout } from "layouts/admin-layout"; // types import { NextPageWithLayout } from "lib/types"; // hooks import { useApplication } from "hooks/store"; // ui import { Loader } from "@plane/ui"; // components import { InstanceImageConfigForm } from "components/instance"; import { PageHead } from "components/core"; const InstanceAdminImagePage: NextPageWithLayout = observer(() => { // store const { instance: { fetchInstanceConfigurations, formattedConfig }, } = useApplication(); useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations()); return ( <> <PageHead title="God Mode - Images" /> <div className="flex flex-col gap-8"> <div className="mb-2 border-b border-custom-border-100 pb-3"> <div className="pb-1 text-xl font-medium text-custom-text-100">Third-party image libraries</div> <div className="text-sm font-normal text-custom-text-300"> Let your users search and choose images from third-party libraries </div> </div> {formattedConfig ? ( <InstanceImageConfigForm config={formattedConfig} /> ) : ( <Loader className="space-y-4"> <div className="grid grid-cols-2 gap-x-8 gap-y-4"> <Loader.Item height="50px" /> <Loader.Item height="50px" /> </div> <Loader.Item height="50px" /> </Loader> )} </div> </> ); }); InstanceAdminImagePage.getLayout = function getLayout(page: ReactElement) { return <InstanceAdminLayout>{page}</InstanceAdminLayout>; }; export default InstanceAdminImagePage;