{"id":31,"date":"2026-03-10T17:14:51","date_gmt":"2026-03-10T14:14:51","guid":{"rendered":"https:\/\/bonsai.panshiny.ru\/?page_id=31"},"modified":"2026-03-10T17:15:57","modified_gmt":"2026-03-10T14:15:57","slug":"%d0%bf%d0%b0%d0%b2%d0%b5%d0%bb","status":"publish","type":"page","link":"https:\/\/bonsai.panshiny.ru\/?page_id=31","title":{"rendered":"\u041f\u0430\u0432\u0435\u043b"},"content":{"rendered":"\nimport React, { useState, useRef, useEffect } from ‘react’;\nimport { Info, ChevronRight, ChevronDown } from ‘lucide-react’;\n\n\/\/ \u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0443\nconst CATEGORIES = [\n { id: ‘mb-repair’, name: ‘\u0420\u0435\u043c\u043e\u043d\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u043d\u0441\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u044b’ },\n { id: ‘all’, name: ‘\u0412\u0441\u0435’ },\n { id: ‘warranty’, name: ‘\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0439\u043d\u044b\u0439 \u0440\u0435\u043c\u043e\u043d\u0442’ },\n { id: ‘diagnostics’, name: ‘\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0430\u043a\u0442\u0438\u043a\u0430’ },\n { id: ‘software’, name: ‘\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0440\u0435\u043c\u043e\u043d\u0442’ },\n { id: ‘hardware’, name: ‘\u0420\u0435\u043c\u043e\u043d\u0442 \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438’ },\n];\n\nconst SERVICES_DATA = {\n ‘mb-repair’: [\n { id: ‘s1’, name: ‘\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0438 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044f’, price: ‘\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e’, isFree: true },\n { id: ‘s2’, name: ‘\u0412\u044b\u0435\u0437\u0434 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430 \u043d\u0430 \u0434\u043e\u043c’, price: ‘\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e’, isFree: true },\n { id: ‘s3’, name: ‘\u0420\u0435\u043c\u043e\u043d\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u043d\u0441\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u044b’, price: ‘\u043e\u0442 1 990 \u20bd’, isFree: false },\n { id: ‘s4’, name: ‘\u0417\u0430\u043c\u0435\u043d\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u043d\u0441\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u044b’, price: ‘\u043e\u0442 2 490 \u20bd’, isFree: false },\n { id: ‘s5’, name: ‘\u0417\u0430\u043c\u0435\u043d\u0430 \u0447\u0438\u043f\u043e\u0432 \u043c\u0430\u0442\u0435\u0440\u0438\u043d\u0441\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u044b’, price: ‘\u043e\u0442 290 \u20bd’, isFree: false },\n ],\n ‘all’: [\n { id: ‘s6’, name: ‘\u041a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430’, price: ‘\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e’, isFree: true },\n { id: ‘s7’, name: ‘\u041b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0435\u043c\u043e\u043d\u0442’, price: ‘\u043e\u0442 500 \u20bd’, isFree: false },\n ],\n ‘warranty’: [\n { id: ‘s8’, name: ‘\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0439\u043d\u043e\u0435 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435’, price: ‘\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e’, isFree: true },\n ],\n ‘diagnostics’: [\n { id: ‘s9’, name: ‘\u0410\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430’, price: ‘\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e’, isFree: true },\n { id: ‘s10’, name: ‘\u0427\u0438\u0441\u0442\u043a\u0430 \u043e\u0442 \u043f\u044b\u043b\u0438 \u0438 \u0437\u0430\u043c\u0435\u043d\u0430 \u0442\u0435\u0440\u043c\u043e\u043f\u0430\u0441\u0442\u044b’, price: ‘\u043e\u0442 990 \u20bd’, isFree: false },\n ],\n ‘software’: [\n { id: ‘s11’, name: ‘\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b’, price: ‘\u043e\u0442 1 490 \u20bd’, isFree: false },\n { id: ‘s12’, name: ‘\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0440\u0443\u0441\u043e\u0432’, price: ‘\u043e\u0442 790 \u20bd’, isFree: false },\n ],\n ‘hardware’: [\n { id: ‘s13’, name: ‘\u0417\u0430\u043c\u0435\u043d\u0430 \u0436\u0435\u0441\u0442\u043a\u043e\u0433\u043e \u0434\u0438\u0441\u043a\u0430’, price: ‘\u043e\u0442 890 \u20bd’, isFree: false },\n { id: ‘s14’, name: ‘\u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438’, price: ‘\u043e\u0442 590 \u20bd’, isFree: false },\n ],\n};\n\nexport default function App() {\n const [activeCategoryId, setActiveCategoryId] = useState(‘mb-repair’);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u0434\u0440\u043e\u043f\u0434\u0430\u0443\u043d\u0430 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0435 \u0435\u0433\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u0438 (\u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438)\n useEffect(() => {\n function handleClickOutside(event) {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsDropdownOpen(false);\n }\n }\n document.addEventListener(‘mousedown’, handleClickOutside);\n return () => document.removeEventListener(‘mousedown’, handleClickOutside);\n }, []);\n\n const activeCategory = CATEGORIES.find(c => c.id === activeCategoryId);\n const currentServices = SERVICES_DATA[activeCategoryId] || [];\n\n return (\n
\n
\n \n {\/* \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a *\/}\n

\n \u0426\u0435\u043d\u044b \u043d\u0430 \u0440\u0435\u043c\u043e\u043d\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u043d\u0441\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u044b<\/span>\n <\/h1>\n\n {\/* \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u0435\u0442\u043a\u0438 *\/}\n
\n \n {\/* \u041b\u0435\u0432\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430: \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 (Desktop) *\/}\n
\n
\n

\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438<\/h2>\n
    \n {CATEGORIES.map((category) => {\n const isActive = activeCategoryId === category.id;\n return (\n
  • \n setActiveCategoryId(category.id)}\n className={`w-full text-left relative px-4 py-3.5 rounded-xl transition-all duration-200 ${\n isActive \n ? ‘bg-[#F0F5FF] text-[#1B5BFF] font-semibold’ \n : ‘text-[#5A637A] hover:bg-[#F8FAFC] hover:text-[#1A1A1A]’\n }`}\n >\n {\/* \u0421\u0438\u043d\u0438\u0439 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 *\/}\n {isActive && (\n
    \n )}\n {category.name}<\/span>\n <\/button>\n <\/li>\n );\n })}\n <\/ul>\n <\/div>\n <\/div>\n\n {\/* \u041f\u0440\u0430\u0432\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430: \u0423\u0441\u043b\u0443\u0433\u0438 \u0438 \u0426\u0435\u043d\u044b *\/}\n
    \n
    \n \n {\/* \u0428\u0430\u043f\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b *\/}\n
    \n
    \n \u0423\u0441\u043b\u0443\u0433\u0430<\/span>\n \n {\/* \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 (Mobile & Tablet) *\/}\n
    \n setIsDropdownOpen(!isDropdownOpen)}\n className=»flex items-center gap-2 bg-[#F4F6FB] hover:bg-[#EDF1F7] transition-colors rounded-[12px] px-4 py-2 text-[14px] font-medium text-[#1A1A1A]»\n >\n {activeCategory?.name}<\/span>\n \n <\/button>\n\n {\/* \u0412\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a *\/}\n {isDropdownOpen && (\n
    \n {CATEGORIES.map((category) => (\n {\n setActiveCategoryId(category.id);\n setIsDropdownOpen(false);\n }}\n className={`w-full text-left px-4 py-2.5 text-sm transition-colors ${\n activeCategoryId === category.id \n ? ‘bg-[#F0F5FF] text-[#1B5BFF] font-medium’ \n : ‘text-[#5A637A] hover:bg-[#F8FAFC]’\n }`}\n >\n {category.name}\n <\/button>\n ))}\n <\/div>\n )}\n <\/div>\n <\/div>\n \u0426\u0435\u043d\u0430<\/span>\n <\/div>\n\n {\/* \u0421\u043f\u0438\u0441\u043e\u043a \u0443\u0441\u043b\u0443\u0433 *\/}\n
    \n {currentServices.map((service) => (\n
    \n \n {service.name}\n <\/span>\n
    \n \n {service.price}\n <\/span>\n {service.isFree ? (\n \n ) : (\n \n )}\n <\/div>\n <\/div>\n ))}\n <\/div>\n\n {\/* \u0424\u0443\u0442\u0435\u0440-\u0434\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440 *\/}\n
    \n

    \n \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0431\u0435\u0437 \u0443\u0447\u0451\u0442\u0430 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0445 \u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u043e\u0434\u0435\u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\n <\/p>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n );\n}\n","protected":false},"excerpt":{"rendered":"

    import React, { useState, useRef, useEffect } from ‘react’; import { Info, ChevronRight, ChevronDown } from ‘lucide-react’; \/\/ \u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0443 const CATEGORIES = [ { id: ‘mb-repair’, name: ‘\u0420\u0435\u043c\u043e\u043d\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u043d\u0441\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u044b’ }, { id: ‘all’, name: ‘\u0412\u0441\u0435’ }, { id: ‘warranty’, name: ‘\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0439\u043d\u044b\u0439 \u0440\u0435\u043c\u043e\u043d\u0442’ }, { id: ‘diagnostics’, name: ‘\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0430\u043a\u0442\u0438\u043a\u0430’ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":2,"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/bonsai.panshiny.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}