Adaptation

src/components/card.css

@@ -33,7 +33,6 @@ html, body {
 .wrapper__card .container_new .top_new {
     height: 80%;
     width: 100%;
-    background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
     -webkit-background-size: 100%;
     -moz-background-size: 100%;
     -o-background-size: 100%;
@@ -243,4 +242,16 @@ input[type="number"] {
     cursor: pointer;
     transition: background-position 1s steps(28);
     transition-duration: 0s;
-}
+}
+.priceDiscount {
+    color: red;
+}
+.PriceRaye{
+    text-decoration: line-through;
+}
+.allPrice{
+    display: flex;
+    justify-content: center;
+    gap: 5px;
+
+}

src/components/card.js

@@ -70,6 +70,7 @@ render(){
 
     let heart = 'heart is-active';
 		let buy = 'bottoom clicked';
+        let PriceRaye;
 
 		if(this.state.hasClicked === false){
 			heart = 'heart';
@@ -82,6 +83,9 @@ render(){
 		else if (this.state.hasClickedBuyNum % 2 === 1){
 			buy = 'bottoom clicked';
 		}
+        if(this.props.data.price >this.props.data.priceDiscount){
+            PriceRaye="PriceRaye"
+        }
 
     return(
         <div className="wrapper__card">
@@ -91,7 +95,10 @@ render(){
         <div className="left">
             <div className="details">
             <h1>{this.props.data.title}</h1>
-            <p>{this.props.data.price}</p>
+            <div className='allPrice'>
+            <p className={PriceRaye}>{this.props.data.price}</p>
+            <p className='priceDiscount'>{this.props.data.priceDiscount}</p>
+            </div>
             </div>
             <div onClick={ () => {this.Click_Buy_Stockage(); this.click_Buy();}} className="buy"><i className="material-icons">add_shopping_cart</i></div>
         </div>

src/pages/categoriePage.js

@@ -1,109 +1,10 @@
 import React from "react";
-import Card from '../components/card';
+
 import "bootstrap/dist/css/bootstrap.min.css";
 import "mdb-react-ui-kit/dist/css/mdb.min.css";
 
-class CategoriePage extends React.Component {
-
-  state = {
-    search : "",
-    image : [],
-    compenent : true,
-
-  }
-
-  constructor(props){
-    super(props)
-    this.fetch = this.fetch.bind(this)
-    this.searchBar = this.searchBar.bind(this)
-
-  }
-
-  searchBar(){
-
-        this.setState(() =>{
-            return{
-                search: this.props.bar
-            }
-        })
-} 
-
-componentDidMount(){
-
-} 
-
-  componentDidUpdate(){
-/*     console.log(this.props);
-    console.log(this.state.search);
-
-    if(this.state.search === ""){
-      this.searchBar()
-      if(this.state.search !== ""){
-        return
-      }
-    }
-
-
-    if(this.state.compenent === true){
-        this.fetch();
-        if(this.state.compenent === false){
-          return
-        }
-
-    } */
-
-
-    if(this.state.compenent === true){
-        this.fetch();
-
-    }
-
-    if(this.state.compenent === false){
-        if(this.props.bar !== this.state.search){
-            this.fetch()
-        }
-        return
-    }
-
-
-
-}
-
-fetch(){
-    fetch('https://otakod.es/hetic/ecommerce-api/products?search=' + this.props.bar)
-        .then((response) => response.json())
-        .then((dataa) => {
-            this.setState(() => {
-                return{
-                    image : dataa.products,
-                    search : this.props.bar,
-                    compenent : false,
-
-                }
-
-            })
-        })
-
-}
-
-  render (){
-      return (
-        <div className='flex-wrap d-flex justify-content-center p-5'>
-        {
-        this.state.image.map((anime, index) => {
-
-        return (
-            <div key={index} className=' d-flex'>
-                <Card func={this.localStorage} data={anime}  />
-            </div>
-        )
-
-        })
-        }
-        </div>
-      );
-
-  }
+function CategoriePage() {
+  return <></>;
 }
 
 export default CategoriePage;