esp8266-react-framework/interface/src/project/DemoInformation.tsx

import React, { Component } from 'react';
import { Typography, TableRow, TableBody, TableCell, TableHead, Table, Box } from '@material-ui/core';
import { SectionContent } from '../components';

class DemoInformation extends Component {

  render() {
    return (
      <SectionContent title='Demo Information' titleGutter>
        <Typography variant="body1" paragraph>
          This simple demo project allows you to control the blink speed of the built-in LED.
          It demonstrates how the esp8266-react framework may be extended for your own IoT project.
        </Typography>
        <Typography variant="body1" paragraph>
          It is recommended that you keep your project interface code under the 'project' directory.
          This serves to isolate your project code from the from the rest of the user interface which should
          simplify merges should you wish to update your project with future framework changes.
        </Typography>
        <Typography variant="body1" paragraph>
          The demo project interface code stored in the interface/project directory:
        </Typography>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>
                File
              </TableCell>
              <TableCell>
                Description
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell>
                ProjectMenu.tsx
              </TableCell>
              <TableCell>
                You can add your project's screens to the side bar here.
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                ProjectRouting.tsx
              </TableCell>
              <TableCell>
                The routing which controls the screens of your project.
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                DemoProject.tsx
              </TableCell>
              <TableCell>
                This screen, with tabs and tab routing.
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                DemoInformation.tsx
              </TableCell>
              <TableCell>
                The demo information page.
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                LightStateRestController.tsx
              </TableCell>
              <TableCell>
                A form which lets the user control the LED over a REST service.
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                LightStateWebSocketController.tsx
              </TableCell>
              <TableCell>
                A form which lets the user control and monitor the status of the LED over WebSockets.
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>
                LightMqttSettingsController.tsx
              </TableCell>
              <TableCell>
                A form which lets the user change the MQTT settings for MQTT based control of the LED.
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
        <Box mt={2}>
          <Typography variant="body1">
            See the project <a href="https://github.com/rjwats/esp8266-react/">README</a> for a full description of the demo project.
          </Typography>
        </Box>
      </SectionContent>
    )
  }

}

export default DemoInformation;