src/components/Header/DrawerList.jsx - master - DevDenzo/DigitalStore

src/components/Header/DrawerList.jsx
65 строк2 KB
Denis Sklyarskij
Финальный коммит
29 ноя 2025, 18:05
29 ноя 2025, 18:05c8d7804
import React from 'react';
import { Logo } from "./index";
import { Link } from 'react-router-dom';
import { useSelector } from "react-redux";
import PropTypes from 'prop-types';
import { Cart2, Box, InfoSquare, X } from 'react-bootstrap-icons';
import './DrawerList.css';

const DrawerList = ({ onActive }) => {
    const cartItems = useSelector(state => state.cart.itemsCart);

    const handleCloseDrawer = () => {
        onActive(false);
    };

    return (
        <div className="drawer">
            <button
                type="button"
                className="drawer__close-button"
                onClick={handleCloseDrawer}
            >
                <X size={22} />
            </button>
            <div className="drawer__content">
                <Logo />
                <ul className="drawer__list">
                    <li className="drawer__list-item">
                        <Link to="/about" className="drawer__link">
                            <span className="drawer__icon">
                              <InfoSquare size={22} />
                            </span>
                            О нас
                        </Link>
                    </li>
                    <li className="drawer__list-item">
                        <Link to="/orders" className="drawer__link">
                            <span className="drawer__icon">
                              <Box size={22} />
                            </span>
                            Заказы
                        </Link>
                    </li>
                    <li className="drawer__list-item">
                        <Link to="/cart" className="drawer__link">
                            {cartItems.length > 0 && (
                                <span className="drawer__badge">{cartItems.length}</span>
                            )}
                            <span className="drawer__icon">
                              <Cart2 size={22} />
                            </span>
                            Корзина
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    );
};

DrawerList.propTypes = {
    onActive: PropTypes.func.isRequired,
};

export default DrawerList;