abhishekjakhar

import { Suspense, lazy, memo, Children } from 'react';

import { createFileMap } from './createFileMap';

const SandpackRoot = lazy(() => import('./SandpackRoot'));

type PlaygroundProps = {
  children: React.ReactNode;
};

abhishekjakhar

import type { SandpackFile } from '@codesandbox/sandpack-react';

export const createFileMap = (codeSnippets: React.ReactElement[]) => {
  return codeSnippets.reduce(
    (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
      if (codeSnippet.type !== 'pre') {
        return result;
      }
      const { props } = codeSnippet.props.children;

abhishekjakhar

import React from 'react';

const teachers = [
    { id: 1, name: 'Abhishek', subject: 'React' },
    { id: 2, name: 'Aakash', subject: 'JavaScript' }
]

const Description = () => (
    <dl>
        {

abhishekjakhar

import React from 'react';

const TableColumns = (props) => {
    const { name, subject } = props;

    return (
        <div>
            <td>{name}</td>
            <td>{subject}</td>
        </div>

abhishekjakhar

import React from 'react';

const TableColumns = (props) => {
    const { name, subject } = props;

    return (
        <React.Fragment>
            <td>{name}</td>
            <td>{subject}</td>
        </React.Fragment>

abhishekjakhar

import React from 'react';
import TableColumns from './TableColumns';

const teachers = [
    { id: 1, name: 'Abhishek', subject: 'React' },
    { id: 2, name: 'Aakash', subject: 'JavaScript' }
]


const Table = () => (

abhishekjakhar

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');

/* Basic */

*,
*::after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;

abhishekjakhar

import React from 'react';

const Spinner = () => (
    <div className="spinner">
        <div className="bounce1"></div>
        <div className="bounce2"></div>
        <div className="bounce3"></div>
    </div>
);

abhishekjakhar

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

abhishekjakhar

updateMocktail = mocktail => {
  const newMocktail = mocktail;  
  this.setState(state => {
    if (state.mocktail === newMocktail) {
      return null;
    } else {
      return { mocktail };
    }  
  })  
}