src/components/ExpandablePanel/ExpandablePanel.jsx - master - DevDenzo/ERP

src/components/ExpandablePanel/ExpandablePanel.jsx

57 строк2 KB

Denis Sklyarskij

Инициализирован репозиторий

14 янв 2026, 23:32

14 янв 2026, 23:321df3d47

import React, { useState } from 'react';
import classNames from 'classnames';
import './styles/_expandable-panel.less';

const ExpandablePanel = () => {
    const [isExpanded, setIsExpanded] = useState(false);

    const togglePanel = () => {
        setIsExpanded(prev => !prev);
    };

    return (
        <div
            className={classNames(
                'expandable-panel',
                { 'expandable-panel--expanded': isExpanded }
            )}
        >
            <button
                className={classNames('expandable-panel__toggle')}
                onClick={togglePanel}
                aria-expanded={isExpanded}
                aria-controls="expandable-panel-content"
            >
                {isExpanded ? 'Свернуть' : 'Развернуть'} панель
            </button>

            <div
                id="expandable-panel-content"
                className={classNames('expandable-panel__content')}
            >
                <div className={classNames('expandable-panel__inner')}>
                    <h3 className={classNames('expandable-panel__title')}>
                        Заголовок панели
                    </h3>
                    <p className={classNames('expandable-panel__text')}>
                        Здесь размещается содержимое панели. Оно будет видно только
                        при развёрнутом состоянии.
                    </p>
                    <ul className={classNames('expandable-panel__list')}>
                        <li className={classNames('expandable-panel__list-item')}>
                            Элемент списка 1
                        </li>
                        <li className={classNames('expandable-panel__list-item')}>
                            Элемент списка 2
                        </li>
                        <li className={classNames('expandable-panel__list-item')}>
                            Элемент списка 3
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default ExpandablePanel;