AnishDe12020

did:3:kjzl6cwe1jw146k8pf0u0fyta04gcqv4vglp6bpxcse5xxprs7qvg736e1928kd

AnishDe12020

import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import CustomMDXCode from "../components/CustomMDXCode";

export default function Home({ source }) {
  return (
    <div>
      <MDXRemote
        components={{ code: props => <CustomMDXCode {...props} /> }}
        {...source}

AnishDe12020

import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

const CustomMDXCode = props => {
  return (
    <Sandpack
      template={props.template}
      files={{ [`/${props.filename}`]: props.children }}
    />
  );

AnishDe12020

import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";

export default function Home({ source }) {
  return (
    <div>
      <MDXRemote {...source} />
    </div>
  );
}

AnishDe12020

export default function Home() {
  return <div></div>;
}

AnishDe12020

import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

function App() {
  return (
    <div>
      <Sandpack template="react" theme="sandpack-dark" />
    </div>
  );
}

AnishDe12020

<Sandpack template="react" theme="sandpack-dark" />

AnishDe12020

<Sandpack template="react" />

AnishDe12020

<Sandpack />

AnishDe12020

function App() {
  return <div></div>;
}

export default App;