src/components/sidebar/Sidebar.tsx - develop - GEOSHEV/StudLab

src/components/sidebar/Sidebar.tsx
58 строк2 KB
George
Обновил: Линтер по всем файлам
21 мар 2025, 14:25
21 мар 2025, 14:252b503d4
import { useState } from 'react';
import { Reservoir } from '../../context/ReservoirContext';
import { useReservoirs } from '../../context/useReservoirs';
import './Sidebar.css';
import lockIcon from '../../assets/lock-icon.svg';

function Sidebar() {
    const { reservoirs, selectReservoir, selectedReservoir } = useReservoirs();
    const [searchTerm, setSearchTerm] = useState('');

    const handleSelect = (reservoir: Reservoir) => {
        selectReservoir(reservoir);
    };

    return (
        <div className="sidebar">
            <div className="sidebar-header">
                <span className="sidebar-title">Список резервуаров</span>
                <input
                    type="text"
                    className="sidebar-search"
                    placeholder="Поиск резервуара"
                    value={searchTerm}
                    onChange={e => setSearchTerm(e.target.value)}
                />
            </div>

            <div className="sidebar-body-container">
                <div className="sidebar-body">
                    {reservoirs
                        .filter(res =>
                            res.name
                                .toLowerCase()
                                .includes(searchTerm.toLowerCase()),
                        )
                        .map(reservoir => (
                            <div
                                key={reservoir.id}
                                className={`sidebar-item ${selectedReservoir?.id === reservoir.id ? 'selected' : ''}`}
                                onClick={() => handleSelect(reservoir)}
                            >
                                {reservoir.name}
                                {reservoir.isLocked && (
                                    <img
                                        src={lockIcon}
                                        alt="Lock Icon"
                                        className="lock-icon"
                                    />
                                )}
                            </div>
                        ))}
                </div>
            </div>
        </div>
    );
}

export default Sidebar;