├── src
    ├── redux
    │   ├── reducers
    │   │   ├── searchReducer.jsx
    │   │   ├── foundedReducer.jsx
    │   │   ├── selectedProductReducer.jsx
    │   │   ├── basketReducer.jsx
    │   │   ├── productsReducer.jsx
    │   │   └── index.jsx
    │   ├── actions
    │   │   ├── searchActions.jsx
    │   │   ├── basketActions.jsx
    │   │   ├── foundedActions.jsx
    │   │   ├── selectedProductActions.jsx
    │   │   └── productsActions.jsx
    │   └── store
    │   │   └── store.jsx
    ├── index.js
    ├── App.js
    ├── components
    │   ├── CardComponent.jsx
    │   ├── FooterRow.jsx
    │   ├── Navbar.jsx
    │   ├── HeaderRow.jsx
    │   └── CardDetail.jsx
    ├── pages
    │   ├── Home.jsx
    │   ├── Jewelery.jsx
    │   ├── MenClothing.jsx
    │   ├── WomenClothing.jsx
    │   └── Basket.jsx
    └── App.css
├── .gitignore
├── package.json
├── public
    └── index.html
└── README.md


/src/redux/reducers/searchReducer.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const searchReducer = (state = "", action) => {
 3 | 
 4 |     switch (action.type) {
 5 |         case 'SET_SEARCH':
 6 |             return action.payload
 7 | 
 8 |         case 'CLEAR_SEARCH':
 9 |             return action.payload
10 | 
11 |         default:
12 |             return state
13 |     }
14 | }
15 | 
16 | 


--------------------------------------------------------------------------------
/src/redux/reducers/foundedReducer.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const foundedReducer = (state = [], action) => {
 3 | 
 4 |     switch (action.type) {
 5 |         case 'SEARCHING':
 6 |             return [...action.payload]
 7 | 
 8 |         case 'CLEAR_FOUNDED':
 9 |             return [...action.payload]
10 | 
11 |         default:
12 |             return state
13 |     }
14 | }
15 | 
16 | 


--------------------------------------------------------------------------------
/src/redux/reducers/selectedProductReducer.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const selectedProductReducer = (state = {}, action) => {
 3 | 
 4 |     switch (action.type) {
 5 |         case 'SELECTED_PRODUCT':
 6 |             return action.payload
 7 | 
 8 |         case 'REMOVE_SELECTED_PRODUCT':
 9 |             return {}
10 | 
11 |         default:
12 |             return state
13 | 
14 |     }
15 | }


--------------------------------------------------------------------------------
/src/redux/reducers/basketReducer.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const basketReducer = (state = [], action) => {
 3 | 
 4 |     switch (action.type) {
 5 |         case 'ADD_PRODUCT_BASKET':
 6 |             return [...state, { ...action.payload }]
 7 | 
 8 |         case 'DELETE_PRODUCT_BASKET':
 9 |             return [...action.payload ]
10 | 
11 |         default:
12 |             return state
13 |     }
14 | 
15 | }


--------------------------------------------------------------------------------
/src/redux/actions/searchActions.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const setSearch = (e) => {
 3 |     return async (dispatch) => {
 4 |         let value = e.target.value.toLowerCase()
 5 |         await dispatch({ type: 'SET_SEARCH', payload: value })
 6 |     }
 7 | }
 8 | 
 9 | export const clearSearch = () => {
10 |     return async (dispatch) => {
11 |         await dispatch({ type: 'CLEAR_SEARCH', payload: "" })
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build 
13 | 
14 | # misc
15 | .DS_Store 
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/redux/actions/basketActions.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const addProductBasket = (product) => {
 3 |     return async (dispatch) => {
 4 |         await dispatch({ type: 'ADD_PRODUCT_BASKET', payload: product })
 5 |     }
 6 | }
 7 | 
 8 | 
 9 | export const deleteProductBasket = (id) => {
10 |     return async (dispatch, getState) => {
11 |         let Basket = [...getState().basket]
12 |         let filteredBasket = Basket.filter((product) => product.id !== id)
13 |         await dispatch({ type: "DELETE_PRODUCT_BASKET", payload: filteredBasket })
14 |     }
15 | }
16 | 
17 | 


--------------------------------------------------------------------------------
/src/redux/actions/foundedActions.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const searching = (search) => {
 3 |     return async (dispatch, getState) => {
 4 |         let copyProducts = [...getState().products]
 5 |         let filteredSearchProducts = copyProducts.filter((product) => (
 6 |             product.title.toLowerCase().includes(search.toLowerCase())
 7 |         ))
 8 | 
 9 |         await dispatch({ type: 'SEARCHING', payload: filteredSearchProducts })
10 |     }
11 | }
12 | 
13 | export const clearFounded = () => {
14 |     return async (dispatch) => {
15 |         await dispatch({ type: 'CLEAR_FOUNDED', payload: [] })
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/redux/store/store.jsx:
--------------------------------------------------------------------------------
 1 | import { createStore, compose, applyMiddleware } from 'redux'
 2 | import thunk from 'redux-thunk'
 3 | import { persistStore } from 'redux-persist'
 4 | import persistedReducer from './../reducers/index';
 5 | 
 6 | 
 7 | const store = createStore(persistedReducer,
 8 |     compose(
 9 |         applyMiddleware(thunk),
10 |         window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
11 |     )
12 | )
13 | 
14 | const persistor = persistStore(store)
15 | 
16 | store.subscribe(() => store.getState())
17 | 
18 | export default persistor
19 | export default store
20 | 


--------------------------------------------------------------------------------
/src/redux/actions/selectedProductActions.jsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | 
 4 | export const selectedProduct = (id) => {
 5 |     return async (dispatch) => {
 6 |         try {
 7 |             const res = await axios.get(`https://fakestoreapi.com/products/${id}`)
 8 |             await dispatch({ type: 'SELECTED_PRODUCT', payload: res.data })
 9 |         } catch (err) {
10 |             console.log(err)
11 |         }
12 |     }
13 | }
14 | 
15 | 
16 | export const removeSelectedProduct = () => {
17 |     return async (dispatch) => {
18 |         dispatch({ type: 'REMOVE_SELECTED_PRODUCT', payload: {} })
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/redux/reducers/productsReducer.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | export const productsReducer = (state = [], action) => {
 3 | 
 4 |     switch (action.type) {
 5 |         case 'ADD_JEWELERY':
 6 |             return [...action.payload]
 7 | 
 8 |         case 'ADD_ELECTRONICS':
 9 |             return [...action.payload]
10 | 
11 |         case 'ADD_MEN_CLOTHING':
12 |             return [...action.payload]
13 | 
14 |         case 'ADD_WOMEN_CLOTHING':
15 |             return [...action.payload]
16 | 
17 |         case 'REMOVE_PRODUCTS_LIST':
18 |             return [...action.payload]
19 | 
20 |         default:
21 |             return state
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import { BrowserRouter } from "react-router-dom";
 5 | import { PersistGate } from "redux-persist/integration/react";
 6 | import "antd/dist/antd.css";
 7 | import persistor from "./redux/store/store";
 8 | import store from "./redux/store/store";
 9 | import { Provider } from "react-redux";
10 | 
11 | ReactDOM.render(
12 |   <Provider store={store}>
13 |     <BrowserRouter>
14 |       <PersistGate loading={null} persistor={persistor}>
15 |         <App />
16 |       </PersistGate>
17 |     </BrowserRouter>
18 |   </Provider>,
19 |   document.getElementById("root")
20 | );
21 | 


--------------------------------------------------------------------------------
/src/redux/reducers/index.jsx:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux'
 2 | import { persistReducer } from 'redux-persist'
 3 | import storage from 'redux-persist/lib/storage'
 4 | import { basketReducer } from './basketReducer'
 5 | import { productsReducer } from './productsReducer'
 6 | import { selectedProductReducer } from './selectedProductReducer'
 7 | // import { searchReducer } from './searchReducer'
 8 | // import { foundedReducer } from './foundedReducer'
 9 | 
10 | const rootReducer = combineReducers({
11 |     products: productsReducer,
12 |     selected: selectedProductReducer,
13 |     basket: basketReducer,
14 | })
15 | 
16 | const configReducer = {
17 |     key: 'root',
18 |     storage
19 | }
20 | 
21 | const persistedReducer = persistReducer(configReducer, rootReducer) 
22 | 
23 | export default persistedReducer
24 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Switch, Route } from "react-router-dom";
 3 | 
 4 | import Navbar from "./components/Navbar";
 5 | import CardDetail from "./components/CardDetail";
 6 | import Home from "./pages/Home";
 7 | import Basket from "./pages/Basket";
 8 | import Jewelery from "./pages/Jewelery";
 9 | import MenClothing from "./pages/MenClothing";
10 | import WomenClothing from "./pages/WomenClothing";
11 | 
12 | import "antd/dist/antd.css";
13 | import "./App.css";
14 | 
15 | function App() {
16 |   return (
17 |     <div>
18 |       <Navbar />
19 | 
20 |       <Switch>
21 |         <Route exact path="/" component={Home} />
22 |         <Route path="/basket" component={Basket} />
23 |         <Route path="/jewelery" component={Jewelery} />
24 |         <Route path="/men-clothing" component={MenClothing} />
25 |         <Route path="/women-clothing" component={WomenClothing} />
26 |         <Route path="/product/:id" component={CardDetail} />
27 |         <Route>not found</Route>
28 |       </Switch>
29 |     </div>
30 |   );
31 | }
32 | 
33 | export default App;
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "redux-fakeshop",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "antd": "^4.16.5",
10 |     "axios": "^0.21.1",
11 |     "react": "^17.0.2",
12 |     "react-dom": "^17.0.2",
13 |     "react-loading-io": "^2.2.0",
14 |     "react-redux": "^7.2.4",
15 |     "react-router-dom": "^5.2.0",
16 |     "react-scripts": "4.0.3",
17 |     "react-table": "^7.7.0",
18 |     "redux": "^4.1.0",
19 |     "redux-persist": "^6.0.0",
20 |     "redux-thunk": "^2.3.0",
21 |     "web-vitals": "^1.1.2"
22 |   },
23 |   "scripts": {
24 |     "start": "react-scripts start",
25 |     "build": "react-scripts build",
26 |     "test": "react-scripts test",
27 |     "eject": "react-scripts eject"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": [
31 |       "react-app",
32 |       "react-app/jest"
33 |     ]
34 |   },
35 |   "browserslist": {
36 |     "production": [
37 |       ">0.2%",
38 |       "not dead",
39 |       "not op_mini all"
40 |     ],
41 |     "development": [
42 |       "last 1 chrome version",
43 |       "last 1 firefox version",
44 |       "last 1 safari version"
45 |     ]
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/CardComponent.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { NavLink } from 'react-router-dom'
 3 | import { Card, Button, Divider, message } from 'antd'
 4 | import { PlusOutlined } from '@ant-design/icons'
 5 | import { useDispatch } from 'react-redux'
 6 | import { addProductBasket } from '../redux/actions/basketActions'
 7 | 
 8 | 
 9 | function CardComponent({ title, src, price, id, completeProduct }) {
10 | 
11 |     let cuttedTitle = title.replace(/^(.{25}[^\s]*).*/, "$1")
12 |     const dispatch = useDispatch()
13 | 
14 |     return (
15 |         <div>
16 | 
17 |             <Card className='card' hoverable cover={<img alt={title} src={src} />}>
18 | 
19 | 
20 |                 <h3>{cuttedTitle}</h3>
21 |                 <p>&#36; {price}</p>
22 | 
23 |                 <Divider />
24 | 
25 |                 <div className='btn-holder'>
26 |                     <Button className='btn' size='large'><NavLink to={`/product/${id}`}>MORE</NavLink></Button>
27 |                     <Divider className='divider' type="vertical" />
28 |                     <Button className='btn' onClick={() => dispatch(addProductBasket(completeProduct), message.success(`Desired Product With Id "${id}" Added`, .3))} size='large' icon={<PlusOutlined key='add' className='icon' />}>ADD</Button>
29 |                 </div>
30 | 
31 |             </Card >
32 | 
33 |         </div >
34 |     )
35 | }
36 | 
37 | export default CardComponent
38 | 


--------------------------------------------------------------------------------
/src/components/FooterRow.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Row, Col } from 'antd'
 3 | import { InstagramOutlined, LinkedinOutlined, GithubOutlined, MailOutlined, TwitterOutlined } from '@ant-design/icons';
 4 | 
 5 | 
 6 | function FooterRow() {
 7 |     return (
 8 |         <div>
 9 |             <Row className='footer-container'>
10 |                 <Col span={24}>
11 | 
12 |                     <div className='social-media'>
13 |                         <a target="_blank" rel="noreferrer" href='https://www.instagram.com/antd04/'><InstagramOutlined className='social-icon' /></a>
14 |                         <a target="_blank" rel="noreferrer" href='https://www.linkedin.com/in/esrafil-elahi/'><LinkedinOutlined className='social-icon' /></a>
15 |                         <a target="_blank" rel="noreferrer" href='https://github.com/EsrafilElahi'><GithubOutlined className='social-icon' /></a>
16 |                         <a target="_blank" rel="noreferrer" href='Esrafil.ELahi@gmail.com'><MailOutlined className='social-icon' /></a>
17 |                         <a target="_blank" rel="noreferrer" href='https://twitter.com/ElahiEsrafil'><TwitterOutlined className='social-icon' /></a>
18 |                     </div>
19 |                     <p className='copy-right'> &copy; copy right 2021 </p>
20 | 
21 |                 </Col>
22 |             </Row>
23 |         </div>
24 |     )
25 | }
26 | 
27 | export default FooterRow
28 | 
29 | 
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { NavLink } from 'react-router-dom'
 3 | import { Affix, Menu } from 'antd'
 4 | import { DownOutlined } from '@ant-design/icons'
 5 | 
 6 | const { SubMenu } = Menu;
 7 | 
 8 | function Navbar() {
 9 |     return (
10 |         <div>
11 | 
12 |             <Affix>
13 |                 <Menu className='navbar' mode='horizontal'>
14 |                     <Menu.Item key='basket'>
15 |                         <NavLink to='/basket'>BASKET</NavLink>
16 |                     </Menu.Item>
17 |                     <SubMenu key='submenu' title='CATEGORY' icon={<DownOutlined style={{ marginRight: '-10px', fontSize: "10px" }} />}>
18 |                         <Menu.Item key='jewelery'>
19 |                             <NavLink to='/jewelery'>JEWELERY</NavLink>
20 |                         </Menu.Item>
21 |                         <Menu.Item key='men clothing'>
22 |                             <NavLink to='/men-clothing'>MEN CLOTHING</NavLink>
23 |                         </Menu.Item>
24 |                         <Menu.Item key='women clothing'>
25 |                             <NavLink to='/women-clothing'>WOMEN CLOTHING</NavLink>
26 |                         </Menu.Item>
27 |                     </SubMenu>
28 |                     <Menu.Item key='home'>
29 |                         <NavLink to='/'>HOME</NavLink>
30 |                     </Menu.Item>
31 |                 </Menu>
32 |             </Affix>
33 | 
34 |         </div >
35 |     )
36 | }
37 | 
38 | export default Navbar
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/src/components/HeaderRow.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Row, Col, Breadcrumb, Alert } from 'antd'
 3 | // import { useDispatch, useSelector } from 'react-redux'
 4 | // import { setSearch, clearSearch } from '../redux/actions/searchActions'
 5 | // import { searching, clearFounded } from '../redux/actions/foundedActions'
 6 | 
 7 | // const { Search } = Input;
 8 | 
 9 | function HeaderRow({ shop, category }) {
10 | 
11 |     return (
12 |         <div>
13 |             <Row className='alert'>
14 |                 <Col span={24}>
15 |                     <Alert message={category} type='info' />
16 |                 </Col>
17 |             </Row>
18 |             <Row className='container'>
19 |                 {/* <Col xs={24} sm={12}>
20 |                     <div className='search'>
21 |                         <Search value={search} onChange={(e) => (
22 |                             dispatch(setSearch(e)),
23 |                             dispatch(clearFounded())
24 |                         )} onSearch={() => (
25 |                             dispatch(searching(search)),
26 |                             dispatch(clearSearch())
27 |                         )} placeholder='search' />
28 |                     </div>
29 |                 </Col> */}
30 |                 <Col xs={24}>
31 |                     <div className='breadcrumb'>
32 |                         <Breadcrumb separator=">">
33 |                             <Breadcrumb.Item>{shop}</Breadcrumb.Item>
34 |                             <Breadcrumb.Item>{category}</Breadcrumb.Item>
35 |                         </Breadcrumb>
36 |                     </div>
37 |                 </Col>
38 |             </Row>
39 |         </div>
40 |     )
41 | 
42 | }
43 | 
44 | export default HeaderRow
45 | 


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { Row, Col } from 'antd'
 3 | import { Eclipse } from 'react-loading-io'
 4 | 
 5 | import HeaderRow from '../components/HeaderRow'
 6 | import CardComponent from '../components/CardComponent'
 7 | import FooterRow from '../components/FooterRow'
 8 | import { useDispatch, useSelector } from 'react-redux'
 9 | import { addElectronics, removeProductsList } from '../redux/actions/productsActions'
10 | 
11 | 
12 | function Home() {
13 | 
14 |     const products = useSelector((state) => state.products)
15 |     const dispatch = useDispatch()
16 | 
17 |     useEffect(() => {
18 |         dispatch(addElectronics())
19 | 
20 |         return () => {
21 |             dispatch(removeProductsList())
22 |         }
23 | 
24 |     }, [dispatch])
25 | 
26 |     return (
27 |         <div>
28 | 
29 |             <HeaderRow shop='shop' category='Electronics' />
30 |             {products.length === 0 ? (<div className='spin'><Eclipse size={120} /></div>) : null}
31 | 
32 |             <Row gutter={[32, 42]} className='row-container'>
33 |                 {
34 |                     products.map((product) => {
35 |                         return (
36 |                             <Col style={{ marginTop: '30px' }} align="center" justify="center" xs={24} md={12} lg={8} key={product.id}>
37 |                                 <CardComponent completeProduct={product} title={product.title} price={product.price} src={product.image} id={product.id} />
38 |                             </Col>
39 |                         )
40 |                     })
41 |                 }
42 |             </Row>
43 | 
44 |             <hr className='hr' />
45 |             <FooterRow />
46 | 
47 |         </div>
48 |     )
49 | }
50 | 
51 | export default Home
52 | 


--------------------------------------------------------------------------------
/src/pages/Jewelery.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { Row, Col } from 'antd'
 3 | import { Eclipse } from 'react-loading-io'
 4 | 
 5 | 
 6 | import HeaderRow from '../components/HeaderRow'
 7 | import CardComponent from '../components/CardComponent'
 8 | import FooterRow from '../components/FooterRow'
 9 | import { useDispatch, useSelector } from 'react-redux'
10 | import { addJewelery, removeProductsList } from '../redux/actions/productsActions'
11 | 
12 | function Jewelery() {
13 | 
14 |     const products = useSelector((state) => state.products)
15 |     const dispatch = useDispatch()
16 | 
17 |     useEffect(() => {
18 |         dispatch(addJewelery())
19 | 
20 |         return () => {
21 |             dispatch(removeProductsList())
22 |         }
23 | 
24 |     }, [dispatch])
25 | 
26 |     return (
27 |         <div>
28 | 
29 |             <HeaderRow shop='shop' category='Jewelery' />
30 |             {products.length === 0 ? (<div className='spin'><Eclipse size={120} /></div>) : null}
31 | 
32 |             <Row gutter={[32, 42]} className='row-container'>
33 |                 {
34 |                     products.map((product) => {
35 |                         return (
36 |                             <Col style={{marginTop:'30px'}} align="center" justify="center" xs={24} md={12} lg={8} key={product.id}>
37 |                                 <CardComponent completeProduct={product} title={product.title} price={product.price} src={product.image} id={product.id} />
38 |                             </Col>
39 |                         )
40 |                     })
41 |                 }
42 |             </Row>
43 | 
44 |             <hr className='hr' />
45 |             <FooterRow />
46 | 
47 |         </div>
48 |     )
49 | }
50 | 
51 | export default Jewelery
52 | 


--------------------------------------------------------------------------------
/src/pages/MenClothing.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { Row, Col } from 'antd'
 3 | import { Eclipse } from 'react-loading-io'
 4 | 
 5 | 
 6 | import HeaderRow from '../components/HeaderRow'
 7 | import CardComponent from '../components/CardComponent'
 8 | import FooterRow from '../components/FooterRow'
 9 | import { useDispatch, useSelector } from 'react-redux'
10 | import { addMenClothing, removeProductsList } from '../redux/actions/productsActions'
11 | 
12 | function MenClothing() {
13 | 
14 |     const products = useSelector((state) => state.products)
15 |     const dispatch = useDispatch()
16 | 
17 |     useEffect(() => {
18 |         dispatch(addMenClothing())
19 | 
20 |         return () => {
21 |             dispatch(removeProductsList())
22 |         }
23 | 
24 |     }, [dispatch])
25 | 
26 |     return (
27 |         <div>
28 | 
29 |             <HeaderRow shop='shop' category='Men Clothing' />
30 |             {products.length === 0 ? (<div className='spin'><Eclipse size={120} /></div>) : null}
31 | 
32 |             <Row gutter={[32, 42]} className='row-container'>
33 |                 {
34 |                     products.map((product) => {
35 |                         return (
36 |                             <Col style={{marginTop:'30px'}} align="center" justify="center" xs={24} md={12} lg={8} key={product.id}>
37 |                                 <CardComponent completeProduct={product} title={product.title} price={product.price} src={product.image} id={product.id} />
38 |                             </Col>
39 |                         )
40 |                     })
41 |                 }
42 |             </Row>
43 |             
44 |             <hr className='hr' />
45 |             <FooterRow />
46 | 
47 |         </div>
48 |     )
49 | }
50 | 
51 | export default MenClothing
52 | 


--------------------------------------------------------------------------------
/src/pages/WomenClothing.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { Row, Col } from 'antd'
 3 | import { Eclipse } from 'react-loading-io'
 4 | 
 5 | 
 6 | import HeaderRow from '../components/HeaderRow'
 7 | import CardComponent from '../components/CardComponent'
 8 | import FooterRow from '../components/FooterRow'
 9 | import { useDispatch, useSelector } from 'react-redux'
10 | import { addWomenClothing, removeProductsList } from '../redux/actions/productsActions'
11 | 
12 | function WomenClothing() {
13 | 
14 |     const products = useSelector((state) => state.products)
15 |     const dispatch = useDispatch()
16 | 
17 |     useEffect(() => {
18 |         dispatch(addWomenClothing())
19 | 
20 |         return () => {
21 |             dispatch(removeProductsList())
22 |         }
23 | 
24 |     }, [dispatch])
25 | 
26 |     return (
27 |         <div>
28 | 
29 |             <HeaderRow shop='shop' category='Women Clothing' />
30 |             {products.length === 0 ? (<div className='spin'><Eclipse size={120} /></div>) : null}
31 | 
32 |             <Row gutter={[32, 42]} className='row-container'>
33 |                 {
34 |                     products.map((product) => {
35 |                         return (
36 |                             <Col style={{ marginTop: '30px' }} align="center" justify="center" xs={24} md={12} lg={8} key={product.id}>
37 |                                 <CardComponent completeProduct={product} title={product.title} price={product.price} src={product.image} id={product.id} />
38 |                             </Col>
39 |                         )
40 |                     })
41 |                 }
42 |             </Row>
43 | 
44 |             <hr className='hr' />
45 |             <FooterRow />
46 | 
47 |         </div>
48 |     )
49 | }
50 | 
51 | export default WomenClothing
52 | 


--------------------------------------------------------------------------------
/src/redux/actions/productsActions.jsx:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | 
 4 | export const addElectronics = () => {
 5 |     return async (dispatch) => {
 6 |         try {
 7 |             const res = await axios.get(`https://fakestoreapi.com/products/category/electronics`)
 8 |             await dispatch({ type: 'ADD_ELECTRONICS', payload: res.data })
 9 |         }
10 |         catch (err) {
11 |             console.log(err)
12 |         }
13 |     }
14 | }
15 | 
16 | export const addJewelery = () => {
17 |     return async (dispatch) => {
18 |         try {
19 |             const res = await axios.get(`https://fakestoreapi.com/products/category/jewelery`)
20 |             await dispatch({ type: 'ADD_JEWELERY', payload: res.data })
21 |         }
22 |         catch (err) {
23 |             console.log(err)
24 |         }
25 |     }
26 | }
27 | 
28 | 
29 | export const addMenClothing = () => {
30 |     return async (dispatch) => {
31 |         try {
32 |             const res = await axios.get(`https://fakestoreapi.com/products/category/men's clothing`)
33 |             await dispatch({ type: 'ADD_MEN_CLOTHING', payload: res.data })
34 |         }
35 |         catch (err) {
36 |             console.log(err)
37 |         }
38 |     }
39 | }
40 | 
41 | export const addWomenClothing = () => {
42 |     return async (dispatch) => {
43 |         try {
44 |             const res = await axios.get(`https://fakestoreapi.com/products/category/women's clothing`)
45 |             await dispatch({ type: 'ADD_WOMEN_CLOTHING', payload: res.data })
46 |         }
47 |         catch (err) {
48 |             console.log(err)
49 |         }
50 |     }
51 | }
52 | 
53 | export const removeProductsList = () => {
54 |     return async (dispatch) => {
55 |         await dispatch({ type: 'REMOVE_PRODUCTS_LIST', payload: [] })
56 |     }
57 | }
58 | 
59 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="Web site created using create-react-app" />
10 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 |   <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |   <!-- <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
17 |     crossorigin="anonymous" /> -->
18 | 
19 |   <!--
20 |       Notice the use of %PUBLIC_URL% in the tags above.
21 |       It will be replaced with the URL of the `public` folder during the build.
22 |       Only files inside the `public` folder can be referenced from the HTML.
23 | 
24 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
25 |       work correctly both with client-side routing and a non-root public URL.
26 |       Learn how to configure a non-root public URL by running `npm run build`.
27 |     -->
28 |   <title>Fake Shop | Redux</title>
29 | </head>
30 | 
31 | <body>
32 |   <noscript>You need to enable JavaScript to run this app.</noscript>
33 |   <div id="root"></div>
34 |   <!--
35 |       This HTML file is a template.
36 |       If you open it directly in the browser, you will see an empty page.
37 | 
38 |       You can add webfonts, meta tags, or analytics to this file.
39 |       The build step will place the bundled scripts into the <body> tag.
40 | 
41 |       To begin the development, run `npm start` or `yarn start`.
42 |       To create a production bundle, use `npm run build` or `yarn build`.
43 |     -->
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/src/components/CardDetail.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { useParams } from 'react-router-dom'
 3 | import { Row, Col, Tag } from 'antd'
 4 | import { Eclipse } from 'react-loading-io'
 5 | import { CaretRightOutlined } from '@ant-design/icons';
 6 | 
 7 | 
 8 | import { useDispatch, useSelector } from 'react-redux'
 9 | import { selectedProduct, removeSelectedProduct } from '../redux/actions/selectedProductActions'
10 | 
11 | function CardDetail() {
12 |     const selected = useSelector((state) => state.selected)
13 |     const { image, category, title, price, description } = selected;
14 |     const dispatch = useDispatch()
15 |     const { id } = useParams()
16 | 
17 |     useEffect(() => {
18 |         dispatch(selectedProduct(id))
19 | 
20 |         return () => {
21 |             dispatch(removeSelectedProduct())
22 |         }
23 |     }, [dispatch, id])
24 | 
25 |     return (
26 |         <div className='container'>
27 |             {
28 |                 Object.keys(selected).length === 0 ? (<div className='spin'><Eclipse size={120} /></div>) :
29 |                     (
30 |                         <Row className='card-detail-container'>
31 |                             <Col xs={24} lg={12}>
32 |                                 <div className='card-detail-img'>
33 |                                     <img alt={title} src={image} />
34 |                                 </div>
35 |                             </Col>
36 | 
37 |                             <Col xs={24} lg={12}>
38 |                                 <div className='card-detail-content'>
39 |                                     <h1>{title}</h1>
40 |                                     <Tag className='price-tag' icon={<CaretRightOutlined />} color="rgba(247, 89, 171, 0.9)" >{price} &#36;</Tag>
41 |                                     <Tag className='category-tag' icon={<CaretRightOutlined />} color='red' >{category}</Tag>
42 |                                     <p>{description}</p>
43 |                                 </div>
44 |                             </Col>
45 |                         </Row>
46 |                     )
47 |             }
48 |         </div>
49 |     )
50 | }
51 | 
52 | export default CardDetail
53 | 
54 | 
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/src/pages/Basket.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useMemo } from 'react'
  2 | import { Row, Col, Alert, Button, Image } from 'antd'
  3 | import FooterRow from '../components/FooterRow'
  4 | import { DeleteOutlined } from '@ant-design/icons'
  5 | import { useTable, usePagination } from 'react-table'
  6 | 
  7 | import { useDispatch, useSelector } from 'react-redux'
  8 | import { deleteProductBasket } from '../redux/actions/basketActions'
  9 | 
 10 | 
 11 | function Basket() {
 12 | 
 13 |     const basket = useSelector((state) => state.basket)
 14 |     const dispatch = useDispatch()
 15 | 
 16 |     const columns = useMemo(
 17 |         () => [
 18 |             {
 19 |                 Header: 'Product Title',
 20 |                 accessor: 'title',
 21 |                 Cell: (row) => (
 22 |                     <>
 23 |                         {row.cell.value.replace(/^(.{25}[^\s]*).*/, "$1")}
 24 |                     </>
 25 |                 )
 26 |             },
 27 |             {
 28 |                 Header: 'Category',
 29 |                 accessor: 'category',
 30 |             },
 31 |             {
 32 |                 Header: 'Image',
 33 |                 accessor: 'image',
 34 | 
 35 |                 Cell: (row) => (
 36 |                     <span style={{ fontWeight: "bold", color: "rgba(10, 25, 49, .8)" }}>{""}Show
 37 |                        <Image src={row.cell.value} width={5} height={0} />
 38 |                     </span>
 39 |                 )
 40 |             },
 41 |             {
 42 |                 Header: 'Price',
 43 |                 accessor: 'price',
 44 |                 Cell: (row) => <span>{row.cell.value} &#36;</span>
 45 |             },
 46 |             {
 47 |                 Header: "Delete",
 48 |                 accessor: "id",
 49 | 
 50 |                 Cell: (id) => (
 51 |                     <DeleteOutlined style={{ color: "rgba(10, 25, 49, .7)", fontSize: "1.3rem" }} onClick={() => {
 52 |                         dispatch(deleteProductBasket(id.cell.value))
 53 |                     }} />
 54 |                 )
 55 |             },
 56 |         ],
 57 |         [dispatch]
 58 |     )
 59 | 
 60 | 
 61 |     const {
 62 |         getTableProps,
 63 |         getTableBodyProps,
 64 |         headerGroups,
 65 |         prepareRow,
 66 |         page,
 67 |         canPreviousPage,
 68 |         canNextPage,
 69 |         pageCount,
 70 |         nextPage,
 71 |         previousPage,
 72 |         state: { pageIndex }
 73 |     } = useTable(
 74 |         {
 75 |             columns,
 76 |             data: basket,
 77 |             initialState: { pageSize: 4 }
 78 |         },
 79 |         usePagination
 80 |     );
 81 | 
 82 |     return (
 83 |         <>
 84 |             <Row className='alert'>
 85 |                 <Col span={24}>
 86 |                     <Alert type='success' description={`${basket.length}`} message='YOUR PRODUCTS' />
 87 |                 </Col>
 88 |             </Row>
 89 | 
 90 |             <div className='table-container'>
 91 |                 <Row>
 92 | 
 93 |                     <Col className='table-col' span={24}>
 94 |                         <table {...getTableProps()} >
 95 |                             <thead >
 96 |                                 {headerGroups.map(headerGroup => (
 97 |                                     <tr {...headerGroup.getHeaderGroupProps()}>
 98 |                                         {headerGroup.headers.map(column => (
 99 |                                             <th {...column.getHeaderProps()} >
100 |                                                 {column.render('Header')}
101 |                                             </th>
102 |                                         ))}
103 |                                     </tr>
104 |                                 ))}
105 |                             </thead>
106 |                             <tbody {...getTableBodyProps()} >
107 |                                 {page.map(row => {
108 |                                     prepareRow(row)
109 |                                     return (
110 |                                         <tr {...row.getRowProps()}>
111 |                                             {row.cells.map(cell => {
112 |                                                 return (
113 |                                                     <td {...cell.getCellProps()}>
114 |                                                         {cell.render('Cell')}
115 |                                                     </td>
116 |                                                 )
117 |                                             })}
118 |                                         </tr>
119 |                                     )
120 |                                 })}
121 |                             </tbody>
122 |                         </table>
123 |                     </Col>
124 | 
125 |                     <Col span={24} className={basket.length > 4 ? "pagination-show" : "pagination-hidden"}>
126 |                         <div>
127 | 
128 |                             <Button onClick={() => previousPage()} disabled={!canPreviousPage}>
129 |                                 {"<"}
130 |                             </Button>
131 | 
132 |                             <span style={{ padding: "0 7px" }}>
133 |                                 Page{" "}
134 |                                 <strong>
135 |                                     {pageIndex + 1} of {pageCount}
136 |                                 </strong>{" "}
137 |                             </span>
138 | 
139 |                             <Button onClick={() => nextPage()} disabled={!canNextPage}>
140 |                                 {">"}
141 |                             </Button>{" "}
142 | 
143 |                         </div>
144 |                     </Col>
145 | 
146 |                 </Row>
147 | 
148 |             </div>
149 | 
150 |             <hr />
151 |             <FooterRow />
152 | 
153 |         </>
154 |     )
155 | }
156 | 
157 | export default Basket
158 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | @import "~antd/dist/antd.css";
  2 | @import url("https://fonts.googleapis.com/css2?family=Assistant:wght@300&display=swap");
  3 | 
  4 | /* =========== Base =========== */
  5 | * {
  6 |   padding: 0;
  7 |   margin: 0;
  8 |   box-sizing: border-box;
  9 |   font-family: "Assistant", sans-serif;
 10 | }
 11 | 
 12 | body {
 13 |   overflow-x: hidden;
 14 | }
 15 | 
 16 | /* =========== Navbar =========== */
 17 | hr {
 18 |   border-color: #79777711;
 19 |   border-width: 0.1px;
 20 | }
 21 | 
 22 | .hr {
 23 |   margin-top: 5rem;
 24 | }
 25 | 
 26 | .ant-menu-horizontal > .ant-menu-item a {
 27 |   font-size: 14px;
 28 | }
 29 | 
 30 | .ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
 31 |   font-size: 14px;
 32 | }
 33 | 
 34 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item,
 35 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu {
 36 |   margin-top: 8px;
 37 | }
 38 | 
 39 | .ant-menu-overflow {
 40 |   display: flex;
 41 |   justify-content: flex-end;
 42 |   height: 4rem;
 43 | }
 44 | 
 45 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after,
 46 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after,
 47 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after,
 48 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after,
 49 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after,
 50 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after,
 51 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after,
 52 | .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
 53 |   border-bottom: none;
 54 | }
 55 | 
 56 | .ant-menu-horizontal > .ant-menu-item::after,
 57 | .ant-menu-horizontal > .ant-menu-submenu::after {
 58 |   position: absolute;
 59 |   right: 20px;
 60 |   bottom: 0;
 61 |   left: 20px;
 62 |   border-bottom: none;
 63 |   transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 64 |   content: "";
 65 | }
 66 | 
 67 | .navbar {
 68 |   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
 69 |     rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
 70 | }
 71 | 
 72 | /* =========== Header Row =========== */
 73 | 
 74 | .alert {
 75 |   margin: 0 auto;
 76 |   text-align: center;
 77 | }
 78 | 
 79 | .ant-alert-message {
 80 |   font-size: 25px;
 81 |   font-weight: 600;
 82 | }
 83 | 
 84 | .ant-alert-info {
 85 |   height: 5rem;
 86 | }
 87 | 
 88 | .container {
 89 |   margin: 0 auto;
 90 |   padding: 2.5rem 5rem;
 91 | }
 92 | 
 93 | .search {
 94 |   width: 15rem;
 95 |   text-align: center;
 96 |   margin: 0 auto;
 97 | }
 98 | 
 99 | .breadcrumb {
100 |   width: 15rem;
101 |   text-align: center;
102 |   margin: 0 auto;
103 | }
104 | 
105 | .spin {
106 |   text-align: center;
107 |   font-size: 150px;
108 | }
109 | 
110 | /* =========== Card Component =========== */
111 | 
112 | .ant-btn {
113 |   transition: none;
114 | }
115 | 
116 | .ant-divider-vertical {
117 |   height: 1.5rem;
118 |   border-left: 1px solid rgb(0 0 0 / 18%);
119 | }
120 | 
121 | .ant-divider {
122 |   border-top: 1px solid rgb(0 0 0 / 18%);
123 | }
124 | 
125 | .ant-btn > span + .anticon {
126 |   margin-left: 6px;
127 | }
128 | 
129 | .ant-divider-horizontal {
130 |   width: 85%;
131 |   min-width: 80%;
132 |   margin: 25px 0 5px 0;
133 | }
134 | 
135 | .ant-card-body {
136 |   padding: 20px 10px 8px 10px;
137 | }
138 | 
139 | .ant-card-actions > li > span a:not(.ant-btn),
140 | .ant-card-actions > li > span > .anticon {
141 |   color: rgb(0 0 0);
142 | }
143 | 
144 | .ant-btn > .anticon + span,
145 | .btn {
146 |   outline: none !important;
147 |   border: none !important;
148 |   font-weight: bold !important;
149 |   letter-spacing: 1px;
150 | }
151 | 
152 | .ant-btn-lg {
153 |   padding: 6.4px 22px;
154 | }
155 | 
156 | .card {
157 |   cursor: auto !important;
158 |   width: 18rem;
159 | }
160 | 
161 | .card h3 {
162 |   font-size: 16px;
163 |   color: rgba(0, 0, 0, 0.699);
164 | }
165 | 
166 | .card p {
167 |   font-size: 15px;
168 |   color: rgb(75, 2, 63);
169 |   font-weight: bold;
170 |   margin-top: 11px;
171 |   margin-bottom: -7px;
172 | }
173 | 
174 | .card img {
175 |   height: 15rem;
176 | }
177 | 
178 | /* =========== Home =========== */
179 | 
180 | .row-container {
181 |   padding-top: 1.5rem;
182 | }
183 | 
184 | /* =========== Card Detail =========== */
185 | 
186 | .card-detail-container {
187 |   border: 1px solid rgba(43, 42, 42, 0.233);
188 |   padding: 2rem;
189 | }
190 | 
191 | .card-detail-img img {
192 |   width: 25rem;
193 |   height: 28rem;
194 |   vertical-align: middle;
195 | }
196 | 
197 | .price-tag {
198 |   width: 16%;
199 |   padding: 5px 10px;
200 |   font-size: 13px;
201 |   font-weight: bold;
202 |   letter-spacing: 2px;
203 | }
204 | 
205 | .category-tag {
206 |   margin-top: 1.5rem;
207 |   color: rgb(173, 127, 42);
208 |   padding: 10px 10px;
209 |   font-size: 15px;
210 |   font-weight: bold;
211 |   letter-spacing: 2px;
212 |   text-transform: uppercase;
213 | }
214 | 
215 | .card-detail-content {
216 |   display: flex;
217 |   flex-direction: column;
218 |   justify-content: flex-end;
219 |   text-align: left;
220 |   padding: 10px 0;
221 | }
222 | 
223 | .card-detail-content p {
224 |   margin-top: 1.4rem;
225 |   font-size: 16px;
226 |   letter-spacing: 1px;
227 |   line-height: 1.5rem;
228 | }
229 | 
230 | .card-detail-content button {
231 |   width: 27%;
232 |   height: 2.5rem;
233 |   padding: 5px 0;
234 |   font-size: 16px;
235 |   letter-spacing: 1px;
236 | }
237 | 
238 | .card-detail-content h1:first-child {
239 |   font-weight: bold;
240 | }
241 | 
242 | /* =========== Basket =========== */
243 | 
244 | .ant-alert-success {
245 |   height: 5rem;
246 | }
247 | 
248 | .ant-alert-message {
249 |   font-size: 19px !important;
250 |   letter-spacing: 1px;
251 | }
252 | 
253 | .ant-alert-description {
254 |   font-size: 16px !important;
255 |   letter-spacing: 1px;
256 | }
257 | 
258 | .ant-table-pagination.ant-pagination {
259 |   padding: 2rem 0;
260 |   display: flex;
261 |   justify-content: center;
262 | }
263 | 
264 | .ant-table-thead > tr > th {
265 |   text-align: center;
266 | }
267 | 
268 | .ant-table-tbody > tr > td {
269 |   text-align: center;
270 | }
271 | 
272 | /* =========== Footer =========== */
273 | 
274 | .footer-container {
275 |   height: 10rem;
276 |   display: flex;
277 |   justify-content: center;
278 |   align-items: center;
279 | }
280 | 
281 | .social-media {
282 |   display: flex;
283 |   justify-content: center;
284 |   font-size: 1.5rem;
285 |   padding: 1rem 0;
286 | }
287 | 
288 | .social-media a {
289 |   color: rgba(36, 35, 35, 0.938);
290 | }
291 | 
292 | .social-icon {
293 |   margin: 0 0.5rem;
294 |   cursor: pointer;
295 |   transition: ease 0.3s color;
296 | }
297 | 
298 | .social-icon:hover {
299 |   color: #40a9ff;
300 | }
301 | 
302 | .copy-right {
303 |   text-align: center;
304 |   margin-bottom: 0;
305 | }
306 | 
307 | /* =========== Table =========== */
308 | 
309 | .table-container {
310 |   padding: 2rem 10% 2rem 10%;
311 |   height: 25rem;
312 |   overflow: auto;
313 | }
314 | 
315 | .table-col {
316 |   display: flex;
317 |   justify-content: center;
318 |   height: 14rem;
319 | }
320 | 
321 | table {
322 |   border-collapse: collapse;
323 |   font-size: 0.9em;
324 |   font-family: sans-serif;
325 |   min-width: 600px;
326 |   text-align: center;
327 |   vertical-align: middle;
328 |   box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
329 | }
330 | 
331 | thead tr {
332 |   background-color: #009879;
333 |   color: #ffffff;
334 |   text-align: left;
335 | }
336 | 
337 | th,
338 | td {
339 |   padding: 12px 15px;
340 |   text-align: center;
341 | }
342 | 
343 | tbody tr {
344 |   border-bottom: 1px solid #dddddd;
345 | }
346 | 
347 | .pagination-show {
348 |   display: inline;
349 |   text-align: center;
350 |   padding-top: 3.4rem;
351 | }
352 | 
353 | .pagination-hidden {
354 |   display: none;
355 | }
356 | 
357 | /* =========== Media Query =========== */
358 | 
359 | @media only screen and (max-width: 480px) {
360 |   .breadcrumb {
361 |     padding-top: 1.3rem;
362 |   }
363 |   .card-detail-img img {
364 |     width: 20rem;
365 |     height: 20rem;
366 |   }
367 |   .card-detail-container {
368 |     border: none;
369 |     padding: 0;
370 |   }
371 |   .ant-col-xs-24:last-child {
372 |     margin-top: 4rem;
373 |   }
374 |   .price-tag {
375 |     width: 27%;
376 |   }
377 |   .card-detail-content button {
378 |     width: 43%;
379 |     height: 2.8rem;
380 |     margin-top: 1rem;
381 |   }
382 |   table {
383 |     min-width: 400px;
384 |   }
385 |   .table-col {
386 |     height: 17rem;
387 |   }
388 | }
389 | 
390 | @media only screen and (max-width: 576px) {
391 |   .card-detail-container {
392 |     border: none;
393 |     padding: 0;
394 |   }
395 |   .card-detail-img img {
396 |     width: 26rem;
397 |     height: 25rem;
398 |   }
399 |   .ant-col-xs-24:last-child {
400 |     margin-top: 4rem;
401 |   }
402 |   .price-tag {
403 |     width: 20%;
404 |   }
405 |   .card-detail-content button {
406 |     width: 35%;
407 |     height: 2.8rem;
408 |     margin-top: 1rem;
409 |   }
410 |   table {
411 |     min-width: 400px;
412 |   }
413 |   .table-col {
414 |     height: 17rem;
415 |   }
416 | }
417 | 
418 | @media only screen and (max-width: 768px) {
419 |   .card-detail-container {
420 |     border: none;
421 |     padding: 0;
422 |   }
423 |   .card-detail-img img {
424 |     width: 38rem;
425 |     height: 31rem;
426 |   }
427 |   .ant-col-xs-24:last-child {
428 |     margin-top: 4rem;
429 |   }
430 |   .price-tag {
431 |     width: 14%;
432 |   }
433 |   .card-detail-content button {
434 |     width: 23%;
435 |     height: 2.8rem;
436 |     margin-top: 1rem;
437 |   }
438 | }
439 | 
440 | @media only screen and (max-width: 992px) {
441 |   .card-detail-img img {
442 |     width: 21rem;
443 |     height: 35rem;
444 |   }
445 |   .price-tag {
446 |     width: 25%;
447 |   }
448 |   .card-detail-content button {
449 |     width: 35%;
450 |     height: 2.8rem;
451 |   }
452 | }
453 | 


--------------------------------------------------------------------------------