Colorful Stylish Shirt
diff --git a/app/src/components/FavouriteEmpty.tsx b/app/src/components/FavouriteEmpty.tsx
new file mode 100644
index 000000000..e0a96cc2d
--- /dev/null
+++ b/app/src/components/FavouriteEmpty.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import {NavLink} from "react-router-dom";
+import noResults from "../assets/img/no-results.png";
+import {Box} from "@mui/material";
+
+function FavouriteEmpty() {
+ return (
+
+
+
+
+
+
+ 
+ Bạn chưa có sản phẩm yêu thích nào cả
+ Tiếp
+ tục mua sắm
+
+
+
+
+
+
+ );
+}
+
+export default FavouriteEmpty;
\ No newline at end of file
diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
index d19c5ddbe..98490dbd1 100644
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -1,13 +1,13 @@
-import ColorFilter from "./filter/ColorFilter";
-import PriceFilter from "./filter/PriceFilter";
-import SizeFilter from "./filter/SizeFilter";
+import GenderFilter from "./filter/GenderFilter";
+import PriceRangeFilter from "./filter/PriceRangeFilter";
+import RatingFilter from "./filter/RatingFilter";
const Sidebar = () => {
return (
-
-
-
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
)
}
diff --git a/app/src/components/card/ProductCard.tsx b/app/src/components/card/ProductCard.tsx
index 600ab78b8..2ea3ca605 100644
--- a/app/src/components/card/ProductCard.tsx
+++ b/app/src/components/card/ProductCard.tsx
@@ -1,28 +1,171 @@
-const ProductCard = () => {
+import {Product} from "../../types/product.type";
+import {formatCurrency} from "../../util/formatCurrency";
+import Slider from "react-slick";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCartShopping, faEye as faEyeSolid} from "@fortawesome/free-solid-svg-icons";
+import {faEye as faEyeRegular} from '@fortawesome/free-regular-svg-icons'
+import Tooltip from '@mui/material/Tooltip';
+import Chip from '@mui/material/Chip';
+import StarIcon from '@mui/icons-material/Star';
+import {NavLink} from "react-router-dom";
+import {useState} from "react";
+import {Modal} from "react-bootstrap";
+import ProductDetail from "../../pages/ProductDetail";
+import '../../assets/css/styleShop.scss'
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../../store/store";
+import {addToFavourite, removeFromFavourite} from "../../store/favourite.slice";
+
+
+interface ProductCardProps {
+ product: Product
+}
+
+const ProductCard = ({product}: ProductCardProps) => {
+ const dispatch = useDispatch();
+ const isFavourite = useSelector((state: RootState) => {
+ return state.favourite.products.some((favProduct) => favProduct._id === product._id);
+ });
+ const handleAddToFavourite = () => {
+ if (isFavourite) {
+ dispatch(removeFromFavourite(product._id));
+ } else {
+ dispatch(addToFavourite(product));
+ }
+ };
+
+ const images = product?.options!.map(option => option.image)
+
+ const settings = {
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ infinite: true,
+ dots: false,
+ speed: 500,
+ autoplaySpeed: 5000,
+ autoplay: true,
+ pauseOnFocus: true,
+ pauseOnHover: true,
+ fade: true,
+ arrows: false,
+ }
+
+ const [isHovered, setIsHovered] = useState
(false);
+ const [showQuickSeeModal, setShowQuickSeeModal] = useState(false);
+ const handleShowQuickSeeModal = () => setShowQuickSeeModal(true)
+ const handleCloseQuickSeeModal = () => setShowQuickSeeModal(false)
+
+
return (
-
-
-
-
-
-
-
Colorful Stylish Shirt
-
-
$123.00
-
- $123.00
-
+ <>
+
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+ {
+ images.map((image, index) =>
+ 
+ )
+ }
+
+ {
+ isHovered &&
+
+
+
+ }
+
}
+ label={product.rating}
+ variant="outlined"
+ sx={{
+ top: 0,
+ right: 0,
+ background: 'white',
+ fontSize: '1rem',
+ fontFamily: 'var(--primary)'
+ }}
+ />
+
+ {isFavourite ? (
+
+ ) : (
+
+ )}
+
+
+
+
{product.name}
+
+
{formatCurrency((1 - product.discountPercent) * product.originalPrice)}
+ {product.discountPercent !== 0 &&
+
+ {formatCurrency(product.originalPrice)}
+
+ }
+
+
+
+ Xem chi tiết
+
+
+ Thêm vào giỏ hàng
+
+
-
-
-
+
+
+
+
+
+
+
+
+
)
}
-export default ProductCard
\ No newline at end of file
+export default ProductCard
+
+
diff --git a/app/src/components/cart/CartEmpty.tsx b/app/src/components/cart/CartEmpty.tsx
index fddc8ae3c..0a7a7f55c 100644
--- a/app/src/components/cart/CartEmpty.tsx
+++ b/app/src/components/cart/CartEmpty.tsx
@@ -12,7 +12,6 @@ export default function CartEmpty(){
Giỏ hàng trống
- Add something to make me happy :)
Tiếp
tục mua sắm
@@ -21,5 +20,5 @@ export default function CartEmpty(){
- )
+ );
}
\ No newline at end of file
diff --git a/app/src/components/cart/CartItemsList.tsx b/app/src/components/cart/CartItemsList.tsx
index 320881059..e5cdea0d3 100644
--- a/app/src/components/cart/CartItemsList.tsx
+++ b/app/src/components/cart/CartItemsList.tsx
@@ -1,4 +1,3 @@
-// components/CartItemsList.tsx
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTrash} from "@fortawesome/free-solid-svg-icons";
import {formatCurrency} from "../../util/formatCurrency";
@@ -6,7 +5,7 @@ import React, {useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {AppDispatch, RootState} from "../../store/store";
import Button from "react-bootstrap/Button";
-import {removeFromCart, updateCartItemQuantity} from "../../store/cart.slice";
+import {removeAllFromCart, removeFromCart, updateCartItemQuantity} from "../../store/cart.slice";
import ButtonQuantity from "../common/ButtonQuantity";
import {Modal} from 'react-bootstrap';
@@ -16,15 +15,26 @@ export default function CartItemsList() {
const dispatch = useDispatch