import React, { useState, useRef, useEffect } from ‘react’;
import { Info, ChevronRight, ChevronDown } from ‘lucide-react’;
// Демонстрационные данные, полностью соответствующие макету
const CATEGORIES = [
{ id: ‘mb-repair’, name: ‘Ремонт материнской платы’ },
{ id: ‘all’, name: ‘Все’ },
{ id: ‘warranty’, name: ‘Гарантийный ремонт’ },
{ id: ‘diagnostics’, name: ‘Диагностика и профилактика’ },
{ id: ‘software’, name: ‘Программный ремонт’ },
{ id: ‘hardware’, name: ‘Ремонт аппаратной части’ },
];
const SERVICES_DATA = {
‘mb-repair’: [
{ id: ‘s1’, name: ‘Диагностика и консультация’, price: ‘Бесплатно’, isFree: true },
{ id: ‘s2’, name: ‘Выезд специалиста на дом’, price: ‘Бесплатно’, isFree: true },
{ id: ‘s3’, name: ‘Ремонт материнской платы’, price: ‘от 1 990 ₽’, isFree: false },
{ id: ‘s4’, name: ‘Замена материнской платы’, price: ‘от 2 490 ₽’, isFree: false },
{ id: ‘s5’, name: ‘Замена чипов материнской платы’, price: ‘от 290 ₽’, isFree: false },
],
‘all’: [
{ id: ‘s6’, name: ‘Комплексная диагностика’, price: ‘Бесплатно’, isFree: true },
{ id: ‘s7’, name: ‘Любой другой ремонт’, price: ‘от 500 ₽’, isFree: false },
],
‘warranty’: [
{ id: ‘s8’, name: ‘Гарантийное обслуживание’, price: ‘Бесплатно’, isFree: true },
],
‘diagnostics’: [
{ id: ‘s9’, name: ‘Аппаратная диагностика’, price: ‘Бесплатно’, isFree: true },
{ id: ‘s10’, name: ‘Чистка от пыли и замена термопасты’, price: ‘от 990 ₽’, isFree: false },
],
‘software’: [
{ id: ‘s11’, name: ‘Установка операционной системы’, price: ‘от 1 490 ₽’, isFree: false },
{ id: ‘s12’, name: ‘Удаление вирусов’, price: ‘от 790 ₽’, isFree: false },
],
‘hardware’: [
{ id: ‘s13’, name: ‘Замена жесткого диска’, price: ‘от 890 ₽’, isFree: false },
{ id: ‘s14’, name: ‘Увеличение оперативной памяти’, price: ‘от 590 ₽’, isFree: false },
],
};
export default function App() {
const [activeCategoryId, setActiveCategoryId] = useState(‘mb-repair’);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const dropdownRef = useRef(null);
// Закрытие дропдауна при клике вне его области (для мобильной версии)
useEffect(() => {
function handleClickOutside(event) {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsDropdownOpen(false);
}
}
document.addEventListener(‘mousedown’, handleClickOutside);
return () => document.removeEventListener(‘mousedown’, handleClickOutside);
}, []);
const activeCategory = CATEGORIES.find(c => c.id === activeCategoryId);
const currentServices = SERVICES_DATA[activeCategoryId] || [];
return (
{/* Заголовок */}
Цены на ремонт материнской платы
{/* Основной контейнер сетки */}
{/* Левая колонка: Категории (Desktop) */}
Категории
{CATEGORIES.map((category) => {
const isActive = activeCategoryId === category.id;
return (
-
);
})}
{/* Правая колонка: Услуги и Цены */}
{/* Шапка таблицы */}
Услуга
{/* Мобильный селектор категорий (Mobile & Tablet) */}
{/* Выпадающий список */}
{isDropdownOpen && (
{CATEGORIES.map((category) => (
))}
)}
Цена
{/* Список услуг */}
{currentServices.map((service) => (
{service.name}
{service.price}
{service.isFree ? (
) : (
)}
))}
{/* Футер-дисклеймер */}
Стоимость работ указана без учёта стоимости комплектующих и не зависит от модели устройства
);
}