add: routes logic

package.json

@@ -1,24 +1,21 @@
 {
-  "name": "react-homework-template",
+  "name": "react-tabs",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://goitacademy.github.io/react-homework-template/",
+  "homepage": "https://am1007.github.io/react-tabs",
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.8",
-    "@mui/icons-material": "^5.15.10",
-    "@mui/material": "^5.15.10",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
-    "modern-normalize": "^1.1.0",
-    "nanoid": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "react-tabs": "^5.1.0",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

src/components/App/App.jsx

@@ -1,25 +1,34 @@
-import React from 'react';
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import 'react-tabs/style/react-tabs.css';
-
-import SignIn from 'components/SignInForm/SignIn';
+import Home from 'pages/Home';
+import { Container, Header, Logo, Link } from './App.styled';
+import { Routes, Route } from 'react-router-dom';
+import About from 'pages/About';
+import Products from 'pages/Products';
+import ProductDetails from 'pages/ProductDetails';
+import NotFound from 'pages/NotFound';
 
 export const App = () => {
   return (
-    <Tabs>
-      <TabList>
-        <Tab>Title 1</Tab>
-        <Tab>Sign In Form</Tab>
-      </TabList>
-
-      <TabPanel>
-        <h2>Any content 1</h2>
-      </TabPanel>
-      <TabPanel>
-        <SignIn />
-      </TabPanel>
-    </Tabs>
+    <Container>
+      <Header>
+        <Logo>
+          <span role="img" aria-label="computer icon">
+            💻
+          </span>{' '}
+          GoMerch Store
+        </Logo>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+          <Link to="/products">Products</Link>
+        </nav>
+      </Header>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/products" element={<Products />} />
+        <Route path="/products/:id" element={<ProductDetails />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </Container>
   );
 };
-
-// Temporary comment

src/components/App/App.styled.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+
+export const Container = styled.div`
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 016px;
+`;
+
+export const Header = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+  margin-bottom: 16px;
+  border-bottom: 1px solid black;
+`;
+
+export const Logo = styled.p`
+  font-weight: 700;
+  margin: 0;
+`;
+
+export const Link = styled(NavLink)`
+  padding: 8px 16px;
+  border-radius: 4px;
+  text-decoration: none;
+  color: black;
+  font-weight: 500;
+
+  &.active {
+    color: white;
+    background-color: orangered;
+  }
+`;

src/components/ProductList/ProductList.jsx

@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+import { Container, CardWrapper, ProductName } from './ProductList.styled';
+
+export const ProductList = ({ products }) => {
+  return (
+    <Container>
+      {products.map(product => (
+        <CardWrapper key={product.id}>
+          <Link to={`${product.id}`}>
+            <img src="https://via.placeholder.com/200x100" alt="" />
+            <ProductName>{product.name}</ProductName>
+          </Link>
+        </CardWrapper>
+      ))}
+    </Container>
+  );
+};

src/components/ProductList/ProductList.styled.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 200px);
+  gap: 16px;
+`;
+
+export const CardWrapper = styled.div`
+  border: 1px solid black;
+  border-radius: 4px;
+
+  > a {
+    text-decoration: none;
+  }
+`;
+
+export const ProductName = styled.h3`
+  padding: 4px;
+  margin-top: 8px;
+  margin-bottom: 0;
+  color: black;
+`;

src/fakeAPI.js

@@ -0,0 +1,20 @@
+const products = [
+  { id: 'h-1', name: 'Hoodie 1' },
+  { id: 'h-2', name: 'Hoodie 2' },
+  { id: 'h-3', name: 'Hoodie 3' },
+  { id: 's-1', name: 'Sneakers 1' },
+  { id: 's-2', name: 'Sneakers 2' },
+  { id: 's-3', name: 'Sneakers 3' },
+  { id: 's-4', name: 'Sneakers 4' },
+  { id: 'p-1', name: 'Pants 1' },
+  { id: 'p-2', name: 'Pants 2' },
+  { id: 'p-3', name: 'Pants 3' },
+];
+
+export const getProducts = () => {
+  return products;
+};
+
+export const getProductById = productId => {
+  return products.find(product => product.id === productId);
+};

src/index.css

@@ -1,15 +1,10 @@
-@import-normalize; /* bring in normalize.css styles */
-
 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;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
 }

src/index.js

@@ -2,9 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from 'components/App/App';
 import './index.css';
+import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

src/pages/About.jsx

@@ -0,0 +1,22 @@
+const About = () => {
+  return (
+    <main>
+      <h1>About Us</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus
+        laborum amet ab cumque sit nihil dolore modi error repudiandae
+        perspiciatis atque voluptas corrupti, doloribus ex maiores quam magni
+        mollitia illum dolor quis alias in sequi quod. Sunt ex numquam hic
+        asperiores facere natus sapiente cum neque laudantium quam, expedita
+        voluptates atque quia aspernatur saepe illo, rem quasi praesentium
+        aliquid sed inventore obcaecati veniam? Nisi magnam vero, dolore
+        praesentium totam ducimus similique asperiores culpa, eius amet
+        repudiandae quam ut. Architecto commodi, tempore ut nostrum voluptas
+        dolorum illum voluptatum dolores! Quas perferendis quis alias excepturi
+        eaque voluptatibus eveniet error, nulla rem iusto?
+      </p>
+    </main>
+  );
+};
+
+export default About;

src/pages/Home.jsx

@@ -0,0 +1,15 @@
+const Home = () => {
+  return (
+    <main>
+      <h1>Welcome</h1>
+      <img src="https://via.placeholder.com/960x240" alt="" />
+      <p>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto,
+        laboriosam placeat incidunt rem illum animi nemo quibusdam quia
+        voluptatum voluptate.
+      </p>
+    </main>
+  );
+};
+
+export default Home;

src/pages/NotFound.jsx

@@ -0,0 +1,5 @@
+const NotFound = () => {
+  return <h1>NotFound</h1>;
+};
+
+export default NotFound;