Remove mock-up.

5 years ago · c0c6768cbb
parent 981393b7a4
commit c0c6768cbb
2 changed files with 0 additions and 153 deletions
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -8,7 +8,6 @@ import {
  Switch,
  Route
 } from "react-router-dom";
 import Mockup from './components/Mockup';
 import Window from './components/Window';
 function App() {
@ -16,9 +15,6 @@ function App() {
    <Router>
      <DndProvider backend={HTML5Backend}>
        <Switch>
          <Route path="/mockup">
            <Mockup />
          </Route>
          <Route path="/">
            <Window/>
          </Route>
--- a/client/src/components/Mockup.tsx
+++ b/client/src/components/Mockup.tsx
@ -1,149 +0,0 @@
 import React from 'react';
 import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import Box from '@material-ui/core/Box';
 import SearchIcon from '@material-ui/icons/Search';
 import { IconButton, Typography, Chip, Link, AppBar, CssBaseline } from '@material-ui/core';
 export function MockTable() {
    const rows = [
        ['No One Knows', "Queens of the Stone Age", "Blabla", "Tag"],
        ['Ice cream sandwich', "My man", "What?", 37],
        ['Eclair', "George Baker", "Bakeroo", 24],
        ['Cupcake', "The Sweetie Pies", "Bla", "Bloo"],
        ['Gingerbread', "Is ahead", "But you'll get", "Vury fet"],
    ];
    const useTableStyles = makeStyles({
        table: {
            minWidth: 650,
        },
    });
    const classes = useTableStyles();
    return (
        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="a dense table">
                <TableHead>
                    <TableRow>
                        <TableCell align="left">Title</TableCell>
                        <TableCell align="left">Artist</TableCell>
                        <TableCell align="left">Album</TableCell>
                        <TableCell align="right">Tags</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <TableRow key={row[0]}>
                            <TableCell align="left">{row[0]}</TableCell>
                            <TableCell align="left">{row[1]}</TableCell>
                            <TableCell align="left">{row[2]}</TableCell>
                            <TableCell align="right">{row[3]}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
 }
 export function QueryContainer(props: any) {
    return <Paper elevation={3}>
        {props.children}
    </Paper>
 }
 export function QueryElem(props: any) {
    return <>
        <Chip label={props.children} />
    </>
 }
 export function QueryBar() {
    return <Box display="flex" alignItems="center">
        <Box m={2}>
            <IconButton>
                <SearchIcon style={{ fontSize: 80 }} />
            </IconButton>
        </Box>
        <Box m={2}>
            <QueryContainer>
                <Box display="flex" flexDirection="column" alignItems="center">
                    <Box m={0.5} />
                    <Box m={0.5}>
                        <QueryElem>
                            <Typography>By <Link color="inherit" href="#">Queens of the Stone Age</Link></Typography>
                        </QueryElem>
                    </Box>
                    <Box m={0.5}>
                        <QueryElem>
                            <Typography>Released before 2020</Typography>
                        </QueryElem>
                    </Box>
                    <Box m={0.5} />
                </Box>
            </QueryContainer>
        </Box>
        <Box m={2}>
            <Typography variant="button">Or</Typography>
        </Box>
        <Box m={2}>
            <Box m={0.5}>
                <QueryElem>
                    <Typography>Genre: "Awesome"</Typography>
                </QueryElem>
            </Box>
        </Box>
    </Box >
 }
 function MockupBody() {
    return <>
        <AppBar position="static" style={{background: 'grey'}}>
            <Box m={0.5} display="flex" alignItems="center">
                <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
            </Box>
        </AppBar>
        <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
            <Box
                m={1}
                width="80%"
            >
                {/* <Paper> */}
                <QueryBar />
                {/* </Paper> */}
            </Box>
            <Box
                m={1}
                width="80%"
            >
                <Paper>
                    <MockTable />
                </Paper>
            </Box>
        </Box>
    </>
 }
 const darkTheme = createMuiTheme({
    palette: {
        type: 'dark'
    },
 });
 export default function Mockup() {
    return <>
        <ThemeProvider theme={darkTheme}>
            <CssBaseline />
            <MockupBody />
        </ThemeProvider>
    </>
 }