not completed yet

package.json

@@ -6,11 +6,12 @@
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.0",
-    "@mui/material": "^5.2.2",
+    "@mui/material": "^5.2.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.24.0",
+    "bootstrap": "^5.1.3",
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",

src/App.js

@@ -1,8 +1,5 @@
-import logo from './logo.svg';
 import './App.css';
-import Dashboard from './pages/Dashboard'
-import Categories from './pages/Categories'
-import Products from './pages/Products'
+
 import Login from './pages/Login'
 import {Navigate, Route, Routes} from 'react-router-dom'
 import {useEffect,useState} from 'react'

src/components/Card/Card.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import "./style.css"
+const Card = props => {
+    return (
+        <div className="card text-center">
+            <div className="overflow">
+                <img src={props.imgsrc} alt="" className="card-img-top"/>
+            </div>
+
+            <div className="card-body text-dark">
+                <h4 className="card-title">{ props.title}</h4>
+                <p className="card-text text-secondary">{props.price}</p>
+                <a href="#" className="btn btn-outline-success">Go anywhere</a>
+            </div>
+        </div>
+
+    );
+}
+
+export default Card;

src/components/Card/Cards.jsx

@@ -0,0 +1,51 @@
+import React, { Component } from "react";
+import Card from "./Card";
+import Form from "./Form";
+import img1 from "../../assets/images/pic.jpeg"
+import "./style.css"
+import axios from 'axios';
+
+class Cards extends React.Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            Arr: [],
+            SearchedArr: [],
+        }
+    }
+
+    Search = key => {
+        const newResults = this.state.Arr.filter(item => item.title.toLowerCase().includes(key.toLowerCase()));
+        this.setState({ SearchedArr:newResults})
+      };
+    componentDidMount = () => {
+        axios.get(`https://fakestoreapi.com/products?limit=3`)
+        .then(res => {
+            const products = res.data;
+            this.setState({
+                Arr:products,
+                SearchedArr:products
+            })
+        })
+    }
+
+
+    render(){
+        return (
+            <div className="container-fluid  justify-content-ceter">
+                <input type="text" placeholder="Search ..." onChange={event => this.Search(event.target.value)} />
+
+                <div className="row d-flex" >
+                        {
+                            this.state.SearchedArr.map(function(item, i){
+                                return <Card key={i} imgsrc={img1} title={item.title} price={item.price} />
+                            })
+                        }
+                </div>
+
+            </div>
+        )
+    }
+}
+
+export default Cards

src/components/Card/Form.jsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Autocomplete from '@mui/material/Autocomplete';
+
+export default function Form(props) {
+  return (
+    <Stack spacing={2} sx={{ width: 300 }}>
+      <Autocomplete
+        freeSolo
+        id="free-solo-2-demo"
+        disableClearable
+        options={top100Films.map((option) => option.title)}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label="Search input"
+            InputProps={{
+              ...params.InputProps,
+              type: 'search',
+            }}
+          />
+        )}
+      />
+    </Stack>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 }];

src/components/Card/style.css

@@ -0,0 +1,50 @@
+body{
+    background: radial-gradient(#e5e5e5 , #fff ,#e5e5e5 );
+}
+
+.card{
+    width: 20% !important;
+}
+.card:hover{
+    box-shadow: 5px 10px 20px 1px rgba(0,0,0,0.253)!important;
+}
+
+.card-body{
+    padding: 3rem 0 !important;
+}
+.card-text{
+    font-size: 0.9rem;
+    /* padding: 0.4rem 1.9rem; */
+}
+.col-md-4{
+    width: 13rem !important;
+}
+.container-fluid .row{
+    padding-top: 3rem;
+    position: relative;
+}
+.form{
+  width: 70%;
+
+  position: absolute;
+  top: 7rem;
+  left: 50%;
+  transform: translate(-50% , -50%);
+}
+.form>form{
+    display: flex;
+    /* justify-content: space-between; */
+    align-items: flex-end;
+
+}
+.form>form>div{
+    width: 100%;
+}
+
+.form-group>label{
+    width: 100%;
+    text-align: left;
+}
+.btnSubmit{
+    height: 68%;
+}

src/index.js

@@ -4,8 +4,8 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {BrowserRouter} from 'react-router-dom'
-import Drawer from './components/Drawer'
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import 'bootstrap/dist/css/bootstrap.css';
 
 const theme = createTheme({
 

src/pages/Products.jsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
+import Cards from '../components/Card/Cards'
 
 function Products(props) {
 
     return (
         <div>
-            Products
+            <Cards/>
         </div>
     );
 }