fix pret

Frontend/.prettierrc

+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "useTabs": false
+}

Frontend/.prettierrc.cjs

-module.exports = {
-  tabWidth: 2,
-  singleQuote: true,
-  trailingComma: 'es5',
-  printWidth: 100,
-  useTabs: false,
-};

Frontend/.vscode/settings.json

@@ -10,11 +10,6 @@
   "[typescriptreact]": {
     "editor.formatOnSave": true
   },
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

Frontend/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",

Frontend/src/components/UI/AppToolbar/AppToolbar.tsx

+import { AppBar, Box, Toolbar, Typography, styled } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)(() => ({
+  color: 'inherit',
+  textDecoration: 'none',
+  ['&:hover']: { color: 'inherit' },
+}));
+
+export function AppToolbar() {
+  return (
+    <>
+      <AppBar position="fixed">
+        <Toolbar>
+          <Typography variant="h6" component={StyledLink} to={'/'}>
+            Computer parts shop
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box component={Toolbar} marginBottom={2} />
+    </>
+  );
+}

Frontend/src/features/productsSlice.ts

-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {};
 
-const productsSlice = createSlice(
-  {
+const productsSlice = createSlice({
   name: 'products',
   initialState,
   reducers: {},
-  }
-)
+});
 
 export default productsSlice.reducer;

Frontend/src/index.css

 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-  sans-serif;
+  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;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
-

Frontend/src/store/index.ts

@@ -4,7 +4,7 @@ import productsReducer from '../features/productsSlice.ts';
 const store = configureStore({
   reducer: {
     products: productsReducer,
-  }
-})
+  },
+});
 
 export default store;

Frontend/tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
@@ -22,14 +18,10 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "references": [
     {
       "path": "./tsconfig.node.json"

Frontend/vite.config.ts

-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});