6. Tạo giao diện Product (ok)

C:\Users\Administrator\Desktop\typescript\src\routes\index.tsx

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import HomeRoutes from './HomeRoutes';
import ProductRoutes from './ProductRoutes';
import LoginRoutes from './LoginRoutes';
function Routes() {
  return (
    <Router>
    	<HomeRoutes />
    	<LoginRoutes />
    	<ProductRoutes />
    </Router>
  )
}
export default Routes;

C:\Users\Administrator\Desktop\typescript\src\routes\ProductRoutes.tsx

import React from 'react';
import { Switch } from 'react-router-dom';
import AuthenticatedGuard from './../guards/AuthenticatedGuard';
import ProductList from './../pages/Product/ProductList';
import { PATH } from './../constants/paths';
import ProductItem from './../pages/Product/ProductItem';
export default function ProductRoutes() {
  return (
    <Switch>
      <AuthenticatedGuard exact path={PATH.PRODUCT} component={ProductList} />
    </Switch>
  )
}

C:\Users\Administrator\Desktop\typescript\src\pages\Product\ProductList\index.tsx

import React, { useEffect } from 'react';
import MainLayout from './../../../layouts/MainLayout';
import { TableContainer } from './ProductList.styles';
const ProductList = () => {
  return (
    <MainLayout>
      <h2>Product List</h2>
      <TableContainer>
        <table className="table table-striped">
				  <thead>
				    <tr>
				      <th>#</th>
				      <th>Name</th>
				      <th>Quantity</th>
				      <th>Price</th>
				      <th>Actions</th>
				    </tr>
				  </thead>
				  <tbody>
				    <tr>
				      <th>1</th>
				      <td>Iphone</td>
				      <td>100</td>
				      <td>27,000,000 đ</td>
				      <td><a className="btn btn-primary" href="/product/1">Detail</a></td>
				    </tr>
				    <tr>
				      <th>2</th>
				      <td>Samsung</td>
				      <td>28</td>
				      <td>22,000,000 đ</td>
				      <td><a className="btn btn-primary" href="/product/2">Detail</a></td>
				    </tr>
				    <tr>
				      <th>3</th>
				      <td>Nokia</td>
				      <td>10</td>
				      <td>15,000,000 đ</td>
				      <td><a className="btn btn-primary" href="/product/3">Detail</a></td>
				    </tr>
				    <tr>
				      <th>4</th>
				      <td>Sony</td>
				      <td>44</td>
				      <td>25,000,000 đ</td>
				      <td><a className="btn btn-primary" href="/product/4">Detail</a></td>
				    </tr>
				  </tbody>
				</table>
      </TableContainer>
    </MainLayout>
  )
}
export default ProductList;

C:\Users\Administrator\Desktop\typescript\src\pages\Product\ProductList\ProductList.styles.tsx

import styled from 'styled-components'
export const TableContainer = styled.div`
  overflow: auto;
`

C:\Users\Administrator\Desktop\typescript\src\pages\Product\ProductItem\index.tsx

export default {}