Implemented item details with handlers & styling

src/components/item.jsx

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { increment, decrement, remove } from '../slices/cart';
+import { Down, Up } from './icons';
+import Styles from '../styles/item.module.css';
+
+const Item = ({ item }) => {
+  const dispatch = useDispatch();
+  const check = () => {
+    if (item.amount === 1) dispatch(remove(item.id));
+    else dispatch(decrement(item.id));
+  };
+  return (
+    <article className={Styles.article}>
+      <img className={Styles.image} src={item.img} alt={item.title} />
+      <div className={Styles.content}>
+        <h4 className={Styles.title}>{item.title}</h4>
+        <p className={Styles.price}>
+          $
+          {item.price}
+        </p>
+        <button className={Styles.remove} type="button" onClick={() => dispatch(remove(item.id))}>Remove</button>
+      </div>
+      <div className={Styles.buttons}>
+        <button className={Styles.arrow} type="button" onClick={() => dispatch(increment(item.id))}>
+          <Up />
+        </button>
+        <span className={Styles.amount}>{item.amount}</span>
+        <button className={Styles.arrow} type="button" onClick={() => check()}>
+          <Down />
+        </button>
+      </div>
+    </article>
+  );
+};
+
+Item.propTypes = {
+  item: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    img: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    price: PropTypes.string.isRequired,
+    amount: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default Item;

src/styles/item.module.css

@@ -0,0 +1,86 @@
+.article {
+  height: 150px;
+  display: flex;
+  gap: 20px;
+  padding: 10px;
+  justify-content: space-between;
+  background-color: var(--border-color);
+  border-radius: 5px;
+}
+
+.image {
+  width: 100px;
+  padding: 10px 0;
+  aspect-ratio: 4 / 5;
+  object-fit: contain;
+  background-color: var(--bright-color);
+  border-radius: 5px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  margin-inline-end: auto;
+}
+
+.title {
+  font-size: 1.25rem;
+  text-transform: capitalize;
+  color: var(--secondary-color);
+}
+
+.price {
+  font-size: 1.5rem;
+  margin-top: 5px;
+}
+
+.remove {
+  cursor: pointer;
+  align-self: flex-start;
+  padding: 10px 20px;
+  font-weight: bolder;
+  color: var(--secondary-color);
+  background-color: var(--background-color);
+  border-radius: 5px;
+  margin-top: auto;
+}
+
+.buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.arrow {
+  width: 50px;
+  display: flex;
+  padding: 10px 15px;
+  color: var(--secondary-color);
+  background-color: var(--background-color);
+  border-radius: 5px;
+}
+
+.amount {
+  font-size: 1.5rem;
+  text-align: center;
+  font-weight: bolder;
+  color: var(--secondary-color);
+}
+
+.remove:hover,
+.arrow:hover {
+  cursor: pointer;
+  color: var(--dark-color);
+  background-color: var(--bright-color);
+}
+
+@media only screen and (min-width: 768px) {
+  .article {
+    height: 200px;
+  }
+
+  .image {
+    width: 150px;
+  }
+}