https://www.oh-my-teeth.com/static/GraduateVoices-Dr1Za7My.js

1import{I as p,j as e}from"./client-BVnOiaDk.js";import{Q as u}from"./QuoteCornersContainer-Dsqki_xG.js";import{u as x}from"./useBreakpoint-FKSj6IRn.js";import{u as g,a as N}from"./useCarouselSp-B1FtsJxD.js";/* empty css                */import"./cls-DRj8bM_V.js";const b=({voices:n,t:a})=>{const{activeIndex:c,setActiveIndex:d,wrapperRef:h,onLeftButtonClick:m,onRightButtonClick:t}=N(n),s=()=>Math.max(0,n.length-2),i=r=>{var o;d(r);const l=(o=h.current)==null?void 0:o.children[r];if(!l)return;l.parentNode.scroll({left:l.offsetLeft,behavior:"smooth"})};return e("div",{className:"w-full",children:[e("div",{className:"relative overflow-hidden",children:e("div",{ref:h,className:"flex snap-x snap-mandatory overflow-x-auto hidden-scrollbar",children:n.map((r,l)=>e("div",{className:"w-full flex-shrink-0 snap-start sm:w-1/2",children:e("div",{className:"px-2",children:e("div",{className:"rounded-[0.625rem] border border-[#dddddd] p-[1.1875rem]",children:[r.name.map((f,o)=>e("div",{className:`inline-flex rounded-[0.6875rem] bg-[#f2f2f2] px-[0.5625rem] py-[0.3125rem] ${o!==0?"ml-[0.3125rem] sm:ml-[0.625rem]":""} `,children:e("p",{className:"text-xs",children:`#${f}`})},o)),e("div",{className:"pt-[0.9375rem]",children:[e("div",{className:"w-full",children:e("img",{src:r.mainImage,alt:r.case.user,className:"h-full w-full object-cover object-top"})}),e("div",{className:"mt-[1.0625rem]",children:[e("div",{className:"flex items-center gap-3",children:[e("div",{className:"min-w-0 flex-1 pt-2 text-[0.6875rem] leading-normal sm:text-xs",children:[e("p",{children:r.case.user}),e("p",{className:"mt-1 sm:mt-3",children:[a("voices_cost_label"),"：",r.case.price]}),e("p",{className:"mt-1 sm:mt-3",children:[a("voices_period_label"),"：",r.case.period]})]}),e("img",{src:r.beforeImage,alt:`${r.case.user} Before`,className:"w-2/5 flex-shrink-0 object-cover"})]}),e("img",{src:r.afterImage,alt:`${r.case.user} After`,className:"mt-7 w-full object-cover sm:mt-6"}),e("div",{className:"pt-[0.9375rem]",children:e("div",{className:"flex items-center gap-2",children:[e("p",{className:"whitespace-nowrap text-[0.9375rem] font-bold",children:[a("voices_symptom_label"),"："]}),e("div",{className:"flex flex-wrap gap-[0.3125rem]",children:r.case.tag.map((f,o)=>e("span",{className:"inline-block border border-black px-[0.4375rem] py-[0.375rem] text-xs font-bold",children:f},o))})]})})]})]})]})})},l))})}),e("div",{className:"mt-6 flex items-center justify-center gap-4",children:[e("button",{onClick:m,className:"flex h-8 w-8 items-center justify-center rounded-full border border-gray-300 transition-colors hover:border-gray-500 sm:h-10 sm:w-10","aria-label":a("voices_prev_aria"),children:e("svg",{className:"h-4 w-4 sm:h-5 sm:w-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),e("div",{className:"flex gap-2",children:Array.from({length:s()+1}).map((r,l)=>e("button",{onClick:()=>i(l),className:"min-h-11 min-w-11 flex items-center justify-center","aria-label":a("voices_slide_aria",{index:l+1}),children:e("span",{className:`h-3 w-3 rounded-full transition-colors ${c===l?"bg-[#888888]":"bg-gray-300"}`})},l))}),e("button",{onClick:t,className:"flex h-8 w-8 items-center justify-center rounded-full border border-gray-300 transition-colors hover:border-gray-500 sm:h-10 sm:w-10","aria-label":a("voices_next_aria"),children:e("svg",{className:"h-4 w-4 sm:h-5 sm:w-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})})]})]})},w=({voices:n,t:a})=>{const{activeIndex:c,wrapperRef:d,onLeftButtonClick:h,onRightButtonClick:m,onIndicatorClick:t}=g(n);return e("div",{className:"w-full",children:[e("div",{className:"relative overflow-hidden",children:e("div",{ref:d,className:"flex snap-x snap-mandatory overflow-x-auto hidden-scrollbar",children:n.map((s,i)=>e("div",{className:"w-full flex-shrink-0 snap-start sm:w-1/2",children:e("div",{className:"px-10",children:e("div",{className:"rounded-[0.625rem] border border-[#dddddd] p-[14px]",children:[s.name.map((r,l)=>e("div",{className:`inline-flex rounded-[0.6875rem] bg-[#f2f2f2] px-[0.5625rem] py-[0.3125rem] ${l!==0?"ml-[0.3125rem] sm:ml-[0.625rem]":""} `,children:e("p",{className:"text-2xs",children:`#${r}`})},l)),e("div",{className:"pt-3",children:[e("div",{className:"w-full",children:e("img",{src:s.mainImage,alt:s.case.user,className:"h-full w-full object-cover object-top"})}),e("div",{className:"mt-3",children:[e("div",{className:"flex items-center",children:[e("div",{className:"min-w-0 flex-1 text-[0.58rem] leading-normal sm:text-[1.03125rem]",children:[e("p",{children:s.case.user}),e("p",{className:"mt-1 sm:mt-3",children:[a("voices_cost_label"),"：",s.case.price]}),e("p",{className:"mt-1 sm:mt-3",children:[a("voices_period_label"),"：",s.case.period]})]}),e("img",{src:s.beforeImage,alt:`${s.case.user} Before`,className:"w-2/5 flex-shrink-0 object-cover"})]}),e("img",{src:s.afterImage,alt:`${s.case.user} After`,className:"mt-3 w-full object-cover sm:mt-8"}),e("div",{className:"pt-3",children:e("div",{className:"flex items-center gap-1",children:[e("p",{className:"whitespace-nowrap text-[0.9rem] font-bold",children:[a("voices_symptom_label"),"："]}),e("div",{className:"flex gap-[0.3rem]",children:s.case.tag.map((r,l)=>e("span",{className:"inline-block border border-black px-[0.4rem] py-[0.27rem] text-3xs font-bold",children:r},l))})]})})]})]})]})})},i))})}),n.length>1&&e("div",{className:"mt-6 flex items-center justify-center gap-4",children:[e("button",{onClick:h,className:"flex h-8 w-8 items-center justify-center rounded-full border border-gray-300 transition-colors hover:border-gray-500 sm:h-10 sm:w-10","aria-label":a("voices_prev_aria"),children:e("svg",{className:"h-4 w-4 sm:h-5 sm:w-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),e("div",{className:"flex gap-2",children:n.map((s,i)=>e("button",{onClick:()=>t(i),className:"min-h-11 min-w-11 flex items-center justify-center","aria-label":a("voices_slide_aria",{index:i+1}),children:e("span",{className:`h-3 w-3 rounded-full transition-colors ${c===i?"bg-[#888888]":"bg-gray-300"}`})},i))}),e("button",{onClick:m,className:"flex h-8 w-8 items-center justify-center rounded-full border border-gray-300 transition-colors hover:border-gray-500 sm:h-10 sm:w-10","aria-label":a("voices_next_aria"),children:e("svg",{className:"h-4 w-4 sm:h-5 sm:w-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})})]})]})};function B({graduateVoices:n}){const{isMd:a}=x(),{t:c,tJsx:d}=p("top"),m=n.items.map((t,s)=>({id:s+1,name:t.tags,mainImage:t.media.url,beforeImage:t.before.url,afterImage:t.after.url,case:{user:`${t.ageGender}`,price:t.treatmentCost,period:t.treatmentPeriod,image:[],tag:t.symptoms}}));return e("section",{className:"mx-auto mt-9 max-w-[780px] px-4 font-noto text-xs sm:mt-[4.5rem] sm:px-0 sm:text-base",children:[e("div",{className:"flex w-full flex-col items-center justify-center gap-y-2 sm:gap-y-4 md:gap-y-6 lg:gap-y-8 lg:px-0",children:e(u,{className:"w-full",children:e("h2",{className:"flex flex-col items-center justify-center gap-2 text-center font-josefin text-2xl font-[700] leading-none sm:gap-6 sm:text-5xl",children:c("graduation_title")})})}),e("div",{className:"mt-[1.875rem] sm:mt-[3.75rem]",children:[e("div",{className:"flex justify-center",children:e("div",{className:"w-full",children:a||m.length<=1?e(w,{voices:m,t:c}):e(b,{voices:m,t:c})})}),d("voices_disclaimer_line")]})]})}export{B as GraduateVoices};