Luccas Mateus 20ac80a5e8
Example of how to create a data portal in 5 minutes (#769)
* [example][m] - start of a simple-example

* Empty-Commit

* [simple-example][sm] - change from repos.json to datasets.json

* [example][m] - changed styling and added octokit

* [build][sm] - fix build
2023-04-18 13:51:48 -03:00

41 lines
1.2 KiB
TypeScript

import { MDXRemote } from "next-mdx-remote";
import dynamic from "next/dynamic";
import { Mermaid } from "@flowershow/core";
import FrictionlessViewFactory from "./FrictionlessView";
// Custom components/renderers to pass to MDX.
// Since the MDX files aren't loaded by webpack, they have no knowledge of how
// to handle import statements. Instead, you must include components in scope
// here.
const components = {
Table: dynamic(() => import("./Table")),
mermaid: Mermaid,
// Excel: dynamic(() => import('../components/Excel')),
// TODO: try and make these dynamic ...
Vega: dynamic(() => import("./Vega")),
VegaLite: dynamic(() => import("./VegaLite")),
LineChart: dynamic(() => import("./LineChart")),
} as any;
export default function DRD({
source,
frictionless = {
views: [],
resources: [],
},
}: {
source: any;
frictionless?: any;
}) {
// dynamic() can't be used inside of React rendering
// as it needs to be marked in the top level of the
// module for preloading to work
components.FrictionlessView = FrictionlessViewFactory({
views: frictionless.views,
resources: frictionless.resources,
});
return <MDXRemote {...source} components={components} />;
}