Task: Add prettier, craco and add default pages and functions

src/App.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import './App.css';
-
-export default function App() {
-  return (
-    <div className="App">
-      <h1>CUBETIQ</h1>
-    </div>
-  );
-}

src/app/App.css

@@ -1,3 +1,3 @@
 .App {
   text-align: center;
-}
+}

src/app/App.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import './App.css'
+
+const App = () => {
+  return (
+    <div className="App">
+      <h1>CUBETIQ</h1>
+    </div>
+  )
+}
+
+export default App

src/index.css

@@ -5,4 +5,4 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}

src/index.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './app/App'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()

src/pages/About/index.less

@@ -0,0 +1,4 @@
+.about-title {
+  text-align: center;
+  font-weight: bold;
+}

src/pages/About/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './index.less'
+
+export default function About() {
+  return (
+    <div className="about-title">
+      <h1>About Us</h1>
+    </div>
+  )
+}

src/pages/Home/index.less

@@ -0,0 +1,5 @@
+.home-title {
+  text-align: center;
+  font-weight: bold;
+  font-size: large;
+}

src/pages/Home/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './index.less'
+
+export default function Home() {
+  return (
+    <div className="home-title">
+      <h1>Home</h1>
+    </div>
+  )
+}

src/reportWebVitals.ts

@@ -1,15 +1,15 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from 'web-vitals'
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals

src/routes/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const RouterView = () => {
+  return <>Router</>
+}
+
+export default RouterView

src/routes/routes.ts

@@ -0,0 +1 @@
+export const routes: Array<any> = []

src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'