Convert project to Material UI (#14)

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

jest.config.ts

@@ -168,7 +168,7 @@ const config: Config = {
   // ],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  testPathIgnorePatterns: ["/node_modules/", "/__utils__/"],
+  testPathIgnorePatterns: ["/node_modules/"],
 
   // The regexp pattern or array of patterns that Jest uses to detect test files
   // testRegex: [],

package.json

@@ -10,25 +10,23 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "next": "^14.0.3",
-    "postcss": "^8.4.34",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-nesting": "^12.0.2",
-    "postcss-preset-env": "^9.3.0",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.9",
+    "@mui/material-nextjs": "^5.15.9",
+    "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
-    "@types/css-mediaquery": "^0",
     "@types/eslint": "^8",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.10.4",
-    "@types/postcss-flexbugs-fixes": "^5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "css-mediaquery": "^0.1.2",
     "eslint": "^8.55.0",
     "eslint-config-next": "^14.0.3",
     "eslint-plugin-prettier": "^5.0.1",

src/app/about/page.tsx

@@ -1,25 +1,23 @@
-import type { Metadata } from "next";
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "About Me",
+  title: "About",
 };
 
-export default function About() {
+const About: React.FC = () => {
   return (
-    <section>
-      <h1>About Me</h1>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat quae
-        optio quos dolor, corporis tenetur? Alias fugit doloribus nesciunt eum
-        perferendis mollitia similique cupiditate ea quaerat. Magnam fugit
-        cupiditate non!
-      </p>
-      <p>
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
-        assumenda laudantium in rem nisi architecto mollitia consequuntur quas
-        nobis cupiditate, natus laborum, excepturi reprehenderit aspernatur
-        commodi, explicabo amet aperiam. Pariatur.
-      </p>
-    </section>
+    <Box>
+      <Typography variant='h1'>About</Typography>
+      <Typography>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum tempore
+        a praesentium perferendis doloremque, veniam minus quis laborum, numquam
+        blanditiis sunt ex consectetur asperiores assumenda nisi laboriosam et
+        tempora quos.
+      </Typography>
+    </Box>
   );
-}
+};
+
+export default About;

src/app/contact/page.tsx

@@ -1,25 +1,23 @@
-import type { Metadata } from "next";
+
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Contact",
 };
 
-const Contact = () => {
+const Contact: React.FC = () => {
   return (
-    <section>
-      <h1>Contact</h1>
-      <ul>
-        <li>
-          <a target="_blank" href="https://icons8.com/icon/24556/lotus">
-            Lotus
-          </a>{" "}
-          icon by{" "}
-          <a target="_blank" href="https://icons8.com">
-            Icons8
-          </a>
-        </li>
-      </ul>
-    </section>
+    <Box>
+      <Typography variant='h1'>Contact</Typography>
+      <Typography>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum tempore
+        a praesentium perferendis doloremque, veniam minus quis laborum, numquam
+        blanditiis sunt ex consectetur asperiores assumenda nisi laboriosam et
+        tempora quos.
+      </Typography>
+    </Box>
   );
 };