You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

43 lines
1.2 KiB

import React, { useState } from "react";
const Counter = ({ incrementIcon, decrementIcon, flex }) => {
const [count, setCount] = useState(0);
return (
<div className={`flex ${flex} items-center`}>
<img
src={incrementIcon}
alt=""
className="w-8 cursor-pointer pointer transition duration-300 ease-in-out transform hover:-translate-y-2"
onClick={() => setCount(count + 1)}
/>
<span
className={`font-sansbold ${flex === "flex-col" ? "my-2" : "mx-2"}`}
// style={count > 0 ? { color: "green" } : { color: "red" }}
style={
count > -1
? count === 0
? { color: "gray" }
: { color: "green" }
: { color: "red" }
}
>
{count}
</span>
<img
src={decrementIcon}
alt=""
className="w-8 cursor-pointer transition duration-300 ease-in-out transform hover:translate-y-2"
onClick={() => setCount(count - 1)}
/>
</div>
);
};
export default Counter;
Counter.defaultProps = {
incrementIcon: "images/black-like-icon.svg",
decrementIcon: "images/black-dislike-icon.svg",
flex: "flex-col",
};