gistfile1.txt

############################# App.jsx ####################################

import React, { useState } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import clsx from 'clsx'
import { makeStyles, useTheme } from '@material-ui/core/styles'
import { List, Typography, Container, Drawer, AppBar, Toolbar, CssBaseline } from '@material-ui/core'
import { Grid, ListItemText, ListItemIcon, ListItem, IconButton, Divider } from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu'
import InboxIcon from '@material-ui/icons/Inbox'
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
import SignIn from '/js/cmp/SignIn'
import SignUp from '/js/cmp/SignUp'

const drawerWidth = 240
const useStyles = makeStyles(t => ({
  root: { marginTop: 15 },
  appBar: { transition: t.transitions.create(['margin', 'width'], { easing: t.transitions.easing.sharp,
             duration: t.transitions.duration.leavingScreen })},
  appBarShift: { width: `calc(100% - ${drawerWidth}px)`, transition: t.transitions.create(['margin', 'width'],
                 {easing: t.transitions.easing.easeOut, duration: t.transitions.duration.enteringScreen}),
                  marginRight: drawerWidth },
  title: {flexGrow: 1},
  hide: {display: 'none'},
  drawer: {width: drawerWidth, flexShrink: 0},
  drawerPaper: {width: drawerWidth},
  drawerHeader: { display: 'flex', alignItems: 'center', padding: t.spacing(0, 1), ...t.mixins.toolbar, justifyContent: 'flex-start' }
}))

function App() {
  const c = useStyles()
  const t = useTheme()
  const [open, setOpen] = useState(false)
  const handleDrawerOpen = () => { setOpen(true) }
  const handleDrawerClose = () => { setOpen(false) }

  return (
      <Container className={c.root}>
        <CssBaseline />

        <AppBar position="fixed" className={clsx(c.appBar, { [c.appBarShift]: open })} >
          <Toolbar>
            <Typography variant="h6" noWrap className={c.title}>AstroLink</Typography>
            <IconButton color="inherit" aria-label="open drawer" edge="end" onClick={handleDrawerOpen} className={clsx(open && c.hide)}>
              <MenuIcon />
            </IconButton>
          </Toolbar>
        </AppBar>

        <Router>
          <Drawer className={c.drawer} variant="persistent" anchor="right" open={open} classes={{ paper: c.drawerPaper }}>
          <div className={c.drawerHeader}>
            <IconButton onClick={handleDrawerClose}>{t.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}</IconButton>
          </div>
          <Divider />
            <List>
              <Link to="/signup" onClick={ handleDrawerClose }>
                <ListItem button><ListItemIcon><InboxIcon /></ListItemIcon><ListItemText primary={"Sing Up"} /></ListItem>
              </Link>
              <Link to="/signin" onClick={ handleDrawerClose }>
                <ListItem button><ListItemIcon><InboxIcon /></ListItemIcon><ListItemText primary={"Sign In"} /></ListItem>
              </Link>
            </List>
          </Drawer>
          <Grid container spacing={1}>
            <Grid item sm={1} md={3} lg={4} xl={5}></Grid>
            <Grid item xs={12} sm={10} md={6} lg={4} xl={2}>
              <Route exact path="/signup" component={SignUp} />
              <Route exact path="/signin" component={SignIn} />
            </Grid>
            <Grid item sm={1} md={3} lg={4} xl={5}></Grid>
          </Grid>
        </Router>

      </Container>
  )
}

export default App

#################################### SignIn.jsx ###################################

import React from 'react'
import { Checkbox, FormControlLabel, TextField, Button, Avatar } from '@material-ui/core'
import { Typography, Box, Grid } from '@material-ui/core'
import Link from '@material-ui/core'
import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
import { makeStyles } from '@material-ui/core/styles'
import Copyright from '/js/cmp/Copyright'

const useStyles = makeStyles(t => ({
  paper: { marginTop: t.spacing(8), display: 'flex', flexDirection: 'column', alignItems: 'center' },
  avatar: { margin: t.spacing(1), backgroundColor: t.palette.secondary.main },
  form: { width: '100%', marginTop: t.spacing(1) },
  submit: { margin: t.spacing(3, 0, 2) },
}))

function SignIn() {
  const c = useStyles()
  return (
    <div className={c.paper}>
      <Avatar className={c.avatar}><LockOutlinedIcon /></Avatar>
      <Typography component="h1" variant="h5">Sign In</Typography>
      <form className={c.form} noValidate>
        <TextField variant="outlined" margin="normal" required fullWidth id="email" label="Email Address"
                   name="email" autoComplete="email" />
        <TextField variant="outlined" margin="normal" required fullWidth name="password" label="Password"
                   type="password" id="password" autoComplete="current-password" />
        <FormControlLabel control={<Checkbox value="remember" color="primary" />} label="Remember me" />
        <Button type="submit" fullWidth variant="contained" color="primary" className={c.submit}>Sign In</Button>
        <Grid container>
          <Grid item xs={12}><Link href="#" variant="body2">Forgot password?</Link></Grid>
          <Grid item xs={12}><Link href="#" variant="body2">Don't have an account? Sign Up</Link></Grid>
        </Grid>
      </form>
      <Box mt={8}><Copyright /></Box>
    </div>
  )
}

export default SignIn


################################### Errors ########################################

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at SignIn.jsx:30. 
    at SignIn (http://localhost:3000/js/cmp/SignIn.jsx:44:13)

...............

react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at SignIn.jsx:31.
    at SignIn (http://localhost:3000/js/cmp/SignIn.jsx:44:13)
    
................

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SignIn`.

..................

The above error occurred in the <div> component:

    at div
    at Grid2 (http://localhost:3000/@fs/Users/gmac/sites/astro/react/astro/node_modules/.vite/@material-ui_core.js?v=29e09b5a:8166:35)