Miramita

client/src/App.js

@@ -8,6 +8,11 @@ import CartMenu from "./scenes/global/CartMenu";
 import Checkout from "./scenes/checkout/Checkout";
 import Confirmation from "./scenes/checkout/Confirmation";
 
+//hermano que onda, que onda hermano
+//ahora si o no
+import Products from "./components/Products/Products";
+
+
 const ScrollToTop = () => {
   const { pathname } = useLocation();
 
@@ -26,6 +31,7 @@ function App() {
         <ScrollToTop />
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route path="the-Products" element={<Products />} />
           <Route path="item/:itemId" element={<ItemDetails />} />
           <Route path="checkout" element={<Checkout />} />
           <Route path="checkout/success" element={<Confirmation />} />

client/src/components/Item/MyItem.css

@@ -0,0 +1,21 @@
+.card{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+}
+.card__image-container{
+    width:100%;
+}
+.card__content-container img{
+    width:100%;
+    object-fit: cover;
+}
+.card__content-container{
+padding:0 1rem;
+display:flex;
+align-items: center;
+justify-content: space-between;
+width:100%;
+}

client/src/components/Item/MyItem.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import './MyItem.css'
+const MyItem = ({item}) => {
+  return (
+    <div className='card'> 
+    <div className='card__image-container'>
+      <img src={item.image} alt="character" />
+    </div>
+    <div className='card__content-container'>
+      <p>{item.name}</p>
+      <p style={{color:item.status === 'Alive'? 'green':item.status === 'Dead'? 'red':'black'}}>{item.status}</p>
+    </div>
+
+    </div>
+  )
+}
+
+export default MyItem

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;
+}

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 (
+    <div className='products'>
+        <div className='products-container'>
+            <div className='filter-container'>
+                <Typography variant="h2" color="initial">Filters</Typography>
+                <Typography variant="h4" color="initial">Statu</Typography>
+                <FormGroup>
+      <FormControlLabel
+        control={<Checkbox checked={aliveChecked} />}
+        label="Alive"
+        onChange={handleAliveCheckboxChange}
+      />
+      <FormControlLabel
+        control={<Checkbox checked={deadChecked} />}
+        label="Dead"
+        onChange={handleDeadCheckboxChange}
+      />
+      <FormControlLabel
+        control={<Checkbox checked={unknownChecked} />}
+        label="unknown"
+        onChange={handleUnknownCheckboxChange}
+      />
+    </FormGroup>
+
+            </div>
+            <div className='products-wrapper'>
+                {loading?(<div>Loading...</div>):(
+
+                    filtedData.map(item =>(
+                        <MyItem key={item.key} item={item}/>
+                    ))
+                    )}
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default Products

client/src/index.css

@@ -10,5 +10,4 @@ body {
 }
 
 .app {
-  margin: auto;
 }

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() {
           <IconButton sx={{ color: "black" }}>
             <MenuOutlined />
           </IconButton>
+          <IconButton sx={{ color: "black" }}>
+            <ChurchIcon onClick={() => navigate('/the-Products')} />
+          </IconButton>
         </Box>
       </Box>
     </Box>

client/src/utils/UseFetch.jsx

@@ -0,0 +1,5 @@
+export const UseFetch = async (url, option) =>{
+    const result = await fetch(url);
+    const json = await result.json();
+    return json;
+}