diff --git a/src/components/card.css b/src/components/card.css
index 9548c02..17cf106 100644
--- a/src/components/card.css
+++ b/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;
-}
\ No newline at end of file
+}
+.priceDiscount {
+ color: red;
+}
+.PriceRaye{
+ text-decoration: line-through;
+}
+.allPrice{
+ display: flex;
+ justify-content: center;
+ gap: 5px;
+
+}
diff --git a/src/components/card.js b/src/components/card.js
index 28ebc96..595c661 100644
--- a/src/components/card.js
+++ b/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(
@@ -91,7 +95,10 @@ render(){
{this.props.data.title}
-
{this.props.data.price}
+
+
{this.props.data.price}
+
{this.props.data.priceDiscount}
+
{this.Click_Buy_Stockage(); this.click_Buy();}} className="buy">add_shopping_cart
diff --git a/src/pages/categoriePage.js b/src/pages/categoriePage.js
index 6adc19c..b752791 100644
--- a/src/pages/categoriePage.js
+++ b/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 (
-
- {
- this.state.image.map((anime, index) => {
-
- return (
-
-
-
- )
-
- })
- }
-
- );
-
- }
+function CategoriePage() {
+ return <>>;
}
export default CategoriePage;