🔥( Hot-Fix ): fixes UI breaking by error rendering component of (react-view) in playground area.

[Uyadav207]

What kind of change does this PR introduce?

• 🔥( Hot-Fix ): fixes UI breaking by error rendering component of (react-view) in the playground area.

Did you add tests for your changes?

• Not required(tested manually)

If relevant, did you update the documentation?

• Not required

Summary

• The error component should not break the UI.
• This will cause the user un-comfortable while using the playground web app.
• Fixes 🐛 Bug: Error log is unaligned and breaking the UI of playground. (Need to make a hot-fix) for all components. #75

Does this PR introduce a breaking change?

• No breaking changes are involved.

Other information (screenshot after the fix)

[netlify]

Deploy preview for rne-playground ready!

Built with commit 93e9b8b

https://deploy-preview-76--rne-playground.netlify.app

[Uyadav207]

@flyingcircle and @pranshuchittora done with the fix... Kindly review it...

[pranshuchittora]

Too many files 😕
The branch of this PR seems to be forked from the previous PR.

[Uyadav207]

I have made a new branch pushed the changes.... Didn't fork the previous branch @pranshuchittora

[Uyadav207]

I think upper commits are related to the previous commit logg .... nothings to do with this PR.. i have checked that i have forked master branch and did changes ....

Please have a look

[pranshuchittora]

Can you pull the latest changes from the master

[Uyadav207]

I will do it and have to make a new pr... please try to merge it sir... before any further conflict.. :)

[Uyadav207]

@pranshuchittora, after merging #15...

getting this error.

• It says no directory props found...
• So to resolve this issue.... I might want to create a props folder and put all the MDX files.... that I have created in 🚀 Feat: Add to airbnb prop explorer #53...
• Then this will work fine ... may I go with this .

[Uyadav207]

@pranshuchittora, sir... in #15... the changes made in ... Content folder in .jsx files

import PropDrawer from "../../components/PropDrawer";
import Playground from "./searchbar.playground.jsx";

const Content = lazy(() => importMDX("../Props/searchbar.md"));

export default function SearchBarPlayground() {
  return (
    <div>
      <Playground />
      <Suspense fallback={<div>Loading...</div>}>
        <PropDrawer>
          <Content />
        </PropDrawer>
      </Suspense>
    </div>
  );
}

Are these chunks of code are repeated allover... and this is making a problem in compiling the web app...

• And also please let me know the file type of markdown.... is it MD or mdx

[Uyadav207]

Made a New PR.. Resolving the merge conflict... @pranshuchittora ... #87