feat(mui): Material Ui setup

Added material ui:
yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material

Added Album template to check rendering. https://mui.com/getting-started/templates/

package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,11 +1,63 @@
 import React from 'react';
 import './App.css';
+import {Button} from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
+import AppBar from '@mui/material/AppBar';
+import LocalPostOfficeIcon from '@mui/icons-material/LocalPostOffice';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import {createTheme, ThemeProvider} from '@mui/material/styles';
+
+const theme = createTheme();
 
 function App() {
-  return (
-    <div className="App">
-    </div>
-  );
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline/>
+            <AppBar position="relative">
+                <Toolbar>
+                    <LocalPostOfficeIcon sx={{ mr: 2 }} />
+                    <Typography variant="h6" color="inherit" noWrap>
+                        App
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+
+            <main>
+                <Box
+                    sx={{
+                        bgcolor: 'background.paper',
+                        pt: 2,
+                        pb: 6,
+                    }}
+                >
+                    <Container maxWidth="md">
+                        <Typography
+                            component="h1"
+                            variant="h2"
+                            align="center"
+                            color="text.primary"
+                            gutterBottom
+                        >
+                            Posts
+                        </Typography>
+                        <Stack
+                            sx={{ pt: 4 }}
+                            direction="row"
+                            spacing={2}
+                            justifyContent="center"
+                        >
+                            <Button variant="contained">Submit</Button>
+                            <Button variant="outlined">Back</Button>
+                        </Stack>
+                    </Container>
+                </Box>
+            </main>
+        </ThemeProvider>
+    );
 }
 
 export default App;

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}