+
+ )
+}
+
+export default MyItem
\ No newline at end of file
diff --git a/client/src/components/Products/Products.css b/client/src/components/Products/Products.css
new file mode 100644
index 0000000..12098ae
--- /dev/null
+++ b/client/src/components/Products/Products.css
@@ -0,0 +1,28 @@
+.products{
+ margin-top: 60px;
+ width:100%;
+ min-height: calc(100vh - 60px);
+ padding:1.5rem;
+}
+.products-container{
+ display:grid;
+ grid-template-columns: 20% 70%;
+ row-gap: 10%;
+ width:100%;
+ height:100%;
+}
+.filter-container{
+ padding:1.5rem;
+ display:flex;
+ flex-direction: column;
+}
+.products-wrapper{
+ display:grid;
+ grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+ place-items: center;
+ padding:1.5rem;
+ gap:1.5rem;
+ border:1px solid #eee;
+ border-radius: 0.5rem;
+ box-shadow: 1px 1px -2px 1px;
+}
\ No newline at end of file
diff --git a/client/src/components/Products/Products.jsx b/client/src/components/Products/Products.jsx
new file mode 100644
index 0000000..41fc8f9
--- /dev/null
+++ b/client/src/components/Products/Products.jsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react'
+import './Products.css'
+import { UseFetch } from '../../utils/UseFetch'
+import MyItem from '../Item/MyItem';
+import { Checkbox, FormControlLabel, FormGroup, Typography } from '@mui/material';
+
+const Products = () => {
+ const [rickAndMortyData, setRickAndMortyData] = useState([]);
+ const urlRickAndMorty = 'https://rickandmortyapi.com/api/character'
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useState(false)
+ const [aliveChecked, setAliveChecked] = useState(true);
+ const [deadChecked, setDeadChecked] = useState(true);
+ const [unknownChecked, setUnknownChecked] = useState(true);
+ const [filtedData, setFilteredData] = useState([]);
+ const fetchingData = async() =>{
+ try{
+ setLoading(true);
+ const result = await UseFetch(`${urlRickAndMorty}`);
+ setRickAndMortyData(result.results);
+ setFilteredData(result.results);
+ setLoading(false);
+ }catch(error){
+ setError(error);
+ setLoading(false);
+ }
+
+ }
+
+
+ useEffect(() =>{
+ fetchingData();
+ },[])
+
+ const handleAliveCheckboxChange = (event) => {
+ setAliveChecked(event.target.checked);
+
+ const filteringData = rickAndMortyData.filter(item => item.status === 'Alive');
+ setFilteredData(filteringData);
+ }
+
+
+
+
+ const handleDeadCheckboxChange = (event) => {
+ setDeadChecked(event.target.checked);
+ };
+
+ const handleUnknownCheckboxChange = (event) => {
+ setUnknownChecked(event.target.checked);
+ };
+
+
+
+ return (
+
+ 
+
+
+
+
+ {item.name}
+{item.status}
+
+
+ )
+}
+
+export default Products
\ No newline at end of file
diff --git a/client/src/index.css b/client/src/index.css
index b6ba23c..a3648c7 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -10,5 +10,4 @@ body {
}
.app {
- margin: auto;
}
diff --git a/client/src/scenes/global/Navbar.jsx b/client/src/scenes/global/Navbar.jsx
index 56736e8..6e392bc 100644
--- a/client/src/scenes/global/Navbar.jsx
+++ b/client/src/scenes/global/Navbar.jsx
@@ -6,6 +6,7 @@ import {
MenuOutlined,
SearchOutlined,
} from "@mui/icons-material";
+import ChurchIcon from '@mui/icons-material/Church';
import { useNavigate } from "react-router-dom";
import { shades } from "../../theme";
import { setIsCartOpen } from "../../state";
@@ -78,6 +79,9 @@ function Navbar() {
+
+
+ Filters
+ Statu
+
+
+
+
+
+ {loading?(
+ ))
+ )}
+
+ Loading...
):(
+
+ filtedData.map(item =>(
+