https://tenxyou.com/_next/static/chunks/2028.d4a59c1151b35e12.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2028],{62028:(e,t,r)=>{r.r(t),r.d(t,{default:()=>w});var n=r(95155),s=r(12115),l=r(74553),i=r(78508),a=r(99733),o=r(10387),c=r.n(o),u=r(65232),d=r.n(u),p=r(22201),f=r(3358),h=r(36646),x=r(59073),m=r(92844);function g(e){if(!Array.isArray(e))return[];let t=[];for(let r of e){if(!r||"object"!=typeof r)continue;let e="string"==typeof r.reel_link?r.reel_link.trim():"";e&&t.push({order:Number.isFinite(Number(r.order))?Number(r.order):0,reel_link:e,use_case_tag:"string"==typeof r.use_case_tag?r.use_case_tag.trim():"",user_id:"string"==typeof r.user_id?r.user_id.trim():"",description_text:"string"==typeof r.description_text?r.description_text.trim():""})}return t.sort((e,t)=>e.order-t.order)}let _=e=>{let{label:t,small:r=!1}=e;return(0,n.jsx)("div",{className:`self-start inline-grid items-center justify-center rounded-full bg-[#fafbff] ${r?"px-[6.4px] py-[1.6px]":"px-[8px] py-[2px]"}`,children:(0,n.jsx)("span",{className:`${c().className} font-medium whitespace-nowrap text-[#1646c8]`,style:{fontSize:r?11.2:14,letterSpacing:r?.0448:.07},children:t})})},b=e=>{let{direction:t,onClick:r,disabled:s}=e;return(0,n.jsx)("button",{type:"button","aria-label":"prev"===t?"Previous":"Next",onClick:r,disabled:s,className:"flex h-[32px] w-[32px] items-center justify-center rounded-full cursor-pointer disabled:cursor-not-allowed transition-opacity",children:(0,n.jsx)("svg",{width:"20",height:"12",viewBox:"0 0 20 12",fill:"none",className:"prev"===t?"rotate-180":"","aria-hidden":"true",children:(0,n.jsx)("path",{d:"M14 1L19 6L14 11M19 6H1",stroke:s?"#9CA3AF":"#1646C8",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})},y=()=>(0,n.jsxs)("h2",{className:`${c().className} capitalize text-[32px] leading-none text-[#1646c8]`,children:[(0,n.jsx)("span",{className:"font-medium",children:"Where to"})," ",(0,n.jsx)("span",{className:"font-bold italic",children:"Wear"})]}),v=e=>{let{card:t,isActive:r,onActivate:l,onEnded:i,onError:a}=e,o=(0,s.useRef)(null),[u,g]=(0,s.useState)(!1),[b,y]=(0,s.useState)(!0);(0,s.useEffect)(()=>{let e=o.current;if(!e)return;let t=new IntersectionObserver(e=>{e.forEach(e=>g(e.isIntersecting))},{threshold:.7});return t.observe(e),()=>t.disconnect()},[]),(0,s.useEffect)(()=>{let e=o.current;e&&(r&&u?e.play().catch(()=>{}):(e.pause(),r||y(!0)))},[r,u]);let v=(0,s.useRef)(i);(0,s.useEffect)(()=>{v.current=i},[i]),(0,s.useEffect)(()=>{if(!r)return;let e=o.current;if(!e)return;let t=()=>{var e;return null==(e=v.current)?void 0:e.call(v)};return e.addEventListener("ended",t),()=>e.removeEventListener("ended",t)},[r]);let w=r?322:257.6,j=r?460:368,N=r?12:9.6,E=r?16:12.8,k=r?14:11.2,S=r?243:194.4;return(0,n.jsxs)("div",{className:"relative shrink-0 overflow-hidden transition-all duration-300 bg-[#111]",style:{width:w,height:j,borderRadius:N,boxShadow:r?"0px 4px 6px 0px rgba(0,0,0,0.15)":"0px 3.2px 4.8px 0px rgba(0,0,0,0.15)"},children:[(0,n.jsxs)(h.ImageKitProvider,{urlEndpoint:x.iE,children:[(0,n.jsx)(h.Ce,{ref:o,src:(0,m.I)(t.reel_link,{width:322,height:460,quality:90,dpr:2}).src,playsInline:!0,muted:b,controls:!1,preload:"auto",onClick:e=>{e.stopPropagation(),r?y(e=>!e):l()},onError:a,className:"absolute inset-0 h-full w-full object-cover cursor-pointer"}),r?(0,n.jsx)("div",{onClick:e=>{e.stopPropagation(),r&&y(e=>!e)},className:"absolute top-3 right-3 z-[3] flex items-center justify-center rounded-full bg-[rgba(243,243,243,0.10)] p-[6px] cursor-pointer",role:"button","aria-label":b?"Unmute":"Mute",children:(0,n.jsx)(p.A,{name:b?f.Ze.SOUND_OFF:f.Ze.SOUND_ON,className:"w-[14px] h-[14px]"})}):null]}),(0,n.jsx)("div",{className:"absolute bottom-0 left-0 w-full bg-gradient-to-b from-transparent to-black pointer-events-none",style:{height:S}}),t.use_case_tag||t.user_id||t.description_text?(0,n.jsxs)("div",{className:"absolute left-0 right-0 z-[2] flex flex-col text-white",style:{padding:r?"0 16px 24px 16px":"0 12.8px 20px 12.8px",bottom:0},children:[t.use_case_tag?(0,n.jsx)("div",{style:{marginBottom:t.user_id||t.description_text?r?28:22.4:0},children:(0,n.jsx)(_,{label:t.use_case_tag,small:!r})}):null,t.user_id?(0,n.jsx)("p",{className:`${c().className} font-bold`,style:{fontSize:E,letterSpacing:r?.08:.064,lineHeight:"normal",marginBottom:4*!!t.description_text},children:t.user_id.startsWith("@")?t.user_id:`@${t.user_id}`}):null,t.description_text?(0,n.jsx)("p",{className:`${d().className}`,style:{fontSize:k,letterSpacing:r?.07:.056,lineHeight:"normal"},children:t.description_text}):null]}):null]})},w=e=>{let{enabled:t,metadata:r,slug:o,omitOuterPadding:c=!1}=e,u=(0,l.A)(),d=u>0&&u<=768,p=(0,s.useMemo)(()=>(function(e){if(!0===e)return!0;

1if("string"==typeof e){let t=e.trim().toLowerCase();return"true"===t||"1"===t}return!1})(t),[t]),[f,h]=(0,s.useState)(()=>new Set),x=(0,s.useMemo)(()=>p?function(e){if(null==e)return[];let t=e;if("string"==typeof t){let e=t.trim();if(!e)return[];try{t=JSON.parse(e)}catch{return[]}}if(Array.isArray(t))return g(t);if(!t||"object"!=typeof t)return[];let r=t;return g(Array.isArray(r.WHERE_TO_WEAR)?r.WHERE_TO_WEAR:Array.isArray(r.where_to_wear)?r.where_to_wear:Array.isArray(r.cards)?r.cards:[])}(r):[],[p,r]),m=(0,s.useMemo)(()=>0===f.size?x:x.filter(e=>!f.has(e.reel_link)),[x,f]),_=e=>{h(t=>{if(t.has(e))return t;let r=new Set(t);return r.add(e),r})},w=(0,s.useRef)(null),j=(0,s.useRef)(null),N=(0,s.useRef)(Date.now()),E=(0,s.useRef)(!1),k=(0,s.useRef)(!1),[S,$]=(0,s.useState)(0);(0,s.useEffect)(()=>{m.length>0&&S>=m.length&&$(m.length-1)},[m.length,S]),(0,s.useEffect)(()=>{if(0===m.length)return;let e=j.current;if(!e)return;let t=new IntersectionObserver(e=>{for(let r of e)r.isIntersecting&&!E.current&&(E.current=!0,(0,i.Vy)(a.D.PRODUCT_SECTION_VIEW,{section_name:"where_to_wear",product_slug:o??"",time_on_page:Math.round((Date.now()-N.current)/1e3)}),t.disconnect())},{threshold:.75});return t.observe(e),()=>t.disconnect()},[m.length,o]),(0,s.useEffect)(()=>{let e=w.current;if(!e||0===m.length)return;let t=()=>{let t=e.children;if(0===t.length)return;let r=e.getBoundingClientRect(),n=d?r.left:r.left+r.width/2,s=0,l=1/0;for(let e=0;e<t.length;e++){let r=t[e].getBoundingClientRect(),i=Math.abs((d?r.left:r.left+r.width/2)-n);i<l&&(l=i,s=e)}$(s)};return e.addEventListener("scroll",t,{passive:!0}),t(),()=>e.removeEventListener("scroll",t)},[m.length,d]);let A=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"smooth",r=w.current;if(!r||e<0||e>=r.children.length)return;

1let n=(parseFloat(getComputedStyle(r).paddingLeft)||0)+273.6*e,s=d?n:n+161-r.clientWidth/2;r.style.scrollSnapType="none",r.scrollTo({left:s,behavior:t});let l=()=>{w.current&&(w.current.style.scrollSnapType="")};if("onscrollend"in r){let e=!1,t=()=>{e||(e=!0,r.removeEventListener("scrollend",t),l())};r.addEventListener("scrollend",t,{once:!0}),window.setTimeout(t,1e3)}else window.setTimeout(l,"smooth"===t?700:350)};return((0,s.useEffect)(()=>{if(k.current||0===m.length||u<=0)return;let e=d?0:Math.floor((m.length-1)/2);k.current=!0,$(e),requestAnimationFrame(()=>A(e,"auto"))},[m.length,d,u]),p&&0!==m.length)?(0,n.jsxs)("section",{ref:j,className:c?"flex flex-col gap-[20px] md:gap-[24px]":"flex flex-col gap-[20px] md:gap-[24px] px-[20px] md:px-[32px]",children:[(0,n.jsx)(y,{}),(0,n.jsxs)("div",{className:"flex flex-col gap-[12px]",children:[(0,n.jsx)("div",{ref:w,className:"flex w-full items-center overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",style:{gap:16,paddingLeft:d?0:"calc(50% - 161px)",paddingRight:d?0:"calc(50% - 161px)",height:460},children:m.map((e,t)=>(0,n.jsx)("div",{className:d?"snap-start":"snap-center",children:(0,n.jsx)(v,{card:e,isActive:t===S,onActivate:()=>A(t),onEnded:()=>{let e=t===m.length-1;A(e?0:t+1,e?"auto":"smooth")},onError:()=>_(e.reel_link)})},`${t}-${e.reel_link}`))}),m.length>1?(0,n.jsxs)("div",{className:"flex items-center justify-center gap-[52px]",children:[(0,n.jsx)(b,{direction:"prev",onClick:()=>A(Math.max(0,S-1)),disabled:0===S}),(0,n.jsx)(b,{direction:"next",onClick:()=>A(Math.min(m.length-1,S+1)),disabled:S===m.length-1})]}):null]})]}):null}},92844:(e,t,r)=>{r.d(t,{I:()=>i});var n=r(59073),s=r(3358),l=r(38411);function i(e,t){let{width:r,height:i,quality:a=90,dpr:o,format:c}=t,u=[`w-${r}`];void 0!==i&&u.push(`h-${i}`),u.push(`q-${a}`),null!=o&&`${o}`.length>0&&u.push(`dpr-${o}`),c&&u.push(`f-${c}`);let d=`tr=${u.join(",")}`,p=e.trim(),f=(0,l.fS)(p,s.nJ).trim();if(!/^https?:\/\//i.test(f))return{src:`${f}?${d}`,useDirect:!1};if(!(n.iE.length>0&&p.startsWith(n.iE)||/^https?:\/\/[^/]*\bik\.imagekit\.io\//i.test(p)))return{src:p,useDirect:!0};let h=p.indexOf("#"),x=h>=0?p.slice(0,h):p,m=h>=0?p.slice(h):"",g=x.indexOf("?"),_=g>=0,b=_?x.slice(g+1).split("&").filter(Boolean):[];if(b.some(e=>/^ik-s=/i.test(e)))return{src:p,useDirect:!0};let y=/\/tr:[^/?]+\//i.test(x),v=b.some(e=>/^tr=/i.test(e));return y||v?{src:p,useDirect:!0}:{src:`${x}${_?"&":"?"}${d}${m}`,useDirect:!0}}}}]);