https://planeta-avtodv.ru/_next/static/chunks/pages/design/category-icons-f2f1961d66d4d42f.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4603],{194:function(e,i,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design/category-icons",function(){return t(2283)}])},2283:function(e,i,t){"use strict";t.r(i);var s=t(5893),l=t(9008),n=t.n(l),a=t(5675),r=t.n(a),c=t(1664),o=t.n(c),d=t(7294);let m=[{title:"Автошины",link:"avtoshiny-194"},{title:"Автомасла и спецжидкости",link:"avtomasla-i-spetszhidkosti-448"},{title:"Автомузыка",link:"avtomuzyka-292"},{title:"Автопринадлежности",link:"avtoprinadlezhnosti-268"},{title:"Автохимия и автокосметика",link:"avtohimiya-i-avtokosmetika-294"},{title:"Шиномонтаж, автокамеры, колпаки, аксессуары для шин",link:"shinomontazh-avtokamery-kolpaki-aksessuary-dlya-shin-644"},{title:"Аккумуляторы, тестеры АКБ, ЗУ, клеммы, перемычки",link:"akkumulyatory-testery-akb-zu-klemmy-peremychki-900"},{title:"Аксессуары салонные",link:"aksessuary-salonnye-454"}],x=[{id:"current",title:"Прежний",note:"Красный и графит"},{id:"red-reduced",title:"5. Меньше деталей",note:"Ближе к исходному стилю"},{id:"red-minimal",title:"6. Минимум деталей",note:"Выбран для каталога"}],h=[{id:"outline",title:"1. Серый контур",note:"Только линии"},{id:"accent",title:"2. Контур с акцентом",note:"Немного красного"},{id:"silhouette",title:"3. Плоский силуэт",note:"Сдержанная серая заливка"},{id:"duotone",title:"4. Два оттенка",note:"Светлые плоские формы"}],p=[...x,...h],u=[["original",0,0],["original",1,0],["original",2,0],["original",0,1],["original",1,1],["accessories",0,0],["original",2,1],["accessories",1,0]],g="focus-visible:!outline focus-visible:!outline-2 focus-visible:!outline-offset-4 focus-visible:!outline-zinc-600";function f({variant:e,index:i,size:t="menu"}){let l=384,n=i%4*384,a="red-reduced"===e||"red-minimal"===e,c=i<4?96:a?520:528,o=`/images/categories/quiet-preview/${e}.png`,d=!1;if("current"===e){let[e,t,s]=u[i],a="original"===e;l=a&&0===t?544:512,n=a&&0===t?-16:512*t,c=512*s-(a?(l-512)/2:16),o=`/images/categories/planeta-red-geometric${a?"":"-accessories"}.png`,d=a&&1===t}let m=1536/l;return(0,s.jsx)("span",{"aria-hidden":"true",className:`relative block shrink-0 overflow-hidden opacity-90 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none ${"current"===e?"mix-blend-multiply":""} ${d?"[clip-path:inset(0_0_0_4%)]":""} ${"tile"===t?"h-14 w-14 md:h-[72px] md:w-[72px]":"h-7 w-7"}`,children:(0,s.jsx)(r(),{src:o,alt:"",width:1536,height:1024,sizes:"tile"===t?`(min-width: 768px) ${72*m}px, ${56*m}px`:`${28*m}px`,className:"absolute !max-w-none",style:{width:`${1536/l*100}%`,height:`${1024/l*100}%`,left:`${-n/l*100}%`,top:`${-c/l*100}%`}})})}function b({variant:e}){return(0,s.jsxs)("div",{children:[(0,s.jsx)("h3",{className:"text-base font-semibold",children:e.title}),(0,s.jsx)("p",{className:"mt-1 text-sm text-zinc-500",children:e.note}),(0,s.jsx)("ul",{className:"!m-0 !mt-5 !list-none !p-0",children:m.map((i,t)=>(0,s.jsx)("li",{className:"!m-0 !p-0",children:(0,s.jsxs)(o(),{href:`/catalog/${i.link}`,className:`group flex h-20 items-center gap-2.5 text-sm leading-5 !text-zinc-800 hover:!text-zinc-800 ${g}`,children:[(0,s.jsx)(f,{variant:e.id,index:t}),(0,s.jsx)("span",{children:i.title})]})},i.link))})]})}function j(){let[e,i]=(0,d.useState)("red-minimal"),t=p.find(i=>i.id===e);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n(),{children:[(0,s.jsx)("title",{children:"Варианты иконок категорий — Планета Авто"}),(0,s.jsx)("meta",{name:"robots",content:"noindex, nofollow"})]}),(0,s.jsx)("main",{className:"min-h-screen bg-white px-4 py-8 font-sans text-zinc-800 sm:px-8 sm:py-12",children:(0,s.jsxs)("div",{className:"mx-auto max-w-[1440px]",children:[(0,s.jsxs)("header",{className:"mb-10",children:[(0,s.jsx)(o(),{href:"/catalog",className:`inline-block text-sm !text-zinc-500 hover:!text-zinc-800 ${g}`,children:"← В каталог"}),(0,s.jsx)("h1",{className:"mt-7 text-3xl font-semibold leading-tight tracking-tight sm:text-4xl",children:"Выбран \xabМинимум деталей\xbb"}),(0,s.jsx)("p",{className:"mt-3 max-w-2xl text-base leading-7 text-zinc-500",children:"Вариант №6 применён ко всем 24 категориям каталога. Ниже — сравнение первых восьми с прежними иконками."})]}),(0,s.jsxs)("section",{"aria-labelledby":"menu-preview-heading",children:[(0,s.jsxs)("div",{className:"mb-6 flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2",children:[(0,s.jsx)("h2",{id:"menu-preview-heading",className:"text-xl font-semibold",children:"В меню"}),(0,s.jsx)("p",{className:"text-sm text-zinc-500",children:"28 px \xb7 при наведении и фокусе — без прозрачности"})]}),(0,s.jsx)("p",{id:"menu-scroll-hint",className:"mb-4 text-sm text-zinc-500 lg:hidden",children:"Прокрутите вправо, чтобы сравнить все варианты."}),(0,s.jsx)("div",{role:"region","aria-label":"Прежний стиль и два новых варианта в меню","aria-describedby":"menu-scroll-hint",tabIndex:0,className:`overflow-x-auto pb-4 ${g}`,children:(0,s.jsx)("div",{className:"grid min-w-[900px] grid-cols-3 gap-x-7",children:x.map(e=>(0,s.jsx)(b,{variant:e},e.id))})}),(0,s.jsxs)("details",{className:"mt-8",children:[(0,s.jsx)("summary",{className:`w-fit cursor-pointer py-2 text-base font-semibold ${g}`,children:"Предыдущие варианты"}),(0,s.jsx)("p",{id:"previous-menu-scroll-hint",className:"mb-4 mt-4 text-sm text-zinc-500 xl:hidden",children:"Прокрутите вправо, чтобы сравнить все четыре варианта."}),(0,s.jsx)("div",{role:"region","aria-label":"Предыдущие четыре варианта в меню","aria-describedby":"previous-menu-scroll-hint",tabIndex:0,className:`mt-5 overflow-x-auto pb-4 ${g}`,children:(0,s.jsx)("div",{className:"grid min-w-[1120px] grid-cols-4 gap-x-7",children:h.map(e=>(0,s.jsx)(b,{variant:e},e.id))})})]})]}),(0,s.jsxs)("section",{"aria-labelledby":"tile-preview-heading",className:"mt-12 sm:mt-16",children:[(0,s.jsxs)("div",{className:"flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2",children:[(0,s.jsx)("h2",{id:"tile-preview-heading",className:"text-xl font-semibold",children:"В плитках каталога"}),(0,s.jsx)("p",{className:"text-sm text-zinc-500",children:"56 px на телефоне \xb7 72 px на большом экране"})]}),(0,s.jsx)("div",{"aria-label":"Вариант иконок в плитках",className:"mt-5 flex flex-wrap gap-x-6 gap-y-1",children:p.map(t=>(0,s.jsx)("button",{type:"button","aria-pressed":e===t.id,"aria-controls":"category-tile-preview",onClick:()=>i(t.id),className:`min-h-[44px] py-2 text-sm ${g} ${e===t.id?"font-semibold text-zinc-900 underline decoration-2 underline-offset-8":"text-zinc-500 hover:text-zinc-800"}`,children:t.title},t.id))}),(0,s.jsxs)("p",{className:"sr-only",role:"status",children:["В плитках выбран вариант: ",t.title,"."]}),(0,s.jsx)("ul",{id:"category-tile-preview","aria-label":`Плитки: ${t.title}`,className:"!m-0 !mt-8 grid !list-none grid-cols-2 gap-x-5 gap-y-8 !p-0 md:grid-cols-4 md:gap-x-8",children:m.map((i,t)=>(0,s.jsx)("li",{className:"!m-0 !p-0",children:(0,s.jsxs)(o(),{href:`/catalog/${i.link}`,className:`group flex h-full flex-col items-center gap-3 px-1 py-4 text-center text-sm font-semibold leading-5 !text-zinc-800 hover:!text-zinc-800 md:text-base md:leading-6 ${g}`,children:[(0,s.jsx)(f,{variant:e,index:t,size:"tile"}),(0,s.jsx)("span",{className:"max-w-[260px]",children:i.title})]})},i.link))}),(0,s.jsx)("p",{className:"mt-8 text-sm leading-6 text-zinc-500",children:"В каталоге для всех категорий выбран №6. Кнопки здесь переключают предпросмотр."})]})]})})]})}j.layout=function({children:e}){return(0,s.jsx)(s.Fragment,{children:e})},i.default=j}},function(e){e.O(0,[2888,9774,179],function(){return e(e.s=194)}),_N_E=e.O()}]);