https://aimangatranslator.app/assets/example-card-fUk5Soe9.js

1import{r as e}from"./rolldown-runtime-QTnfLwEv.js";import{i as t,r as n}from"./framework-DJH1pfSr.js";import{t as r}from"./utils-DXalBF5w.js";import{t as i}from"./chevron-left-DCfW_DIl.js";import{t as a}from"./chevron-right-DPOXR4xf.js";var o=e(t(),1),s=n();function c({before:e,after:t,handleLabel:n,className:c,imageClassName:l,handleSize:u=40,variant:d=`default`}){let[f,p]=(0,o.useState)(50),[m,h]=(0,o.useState)(!1),g=(0,o.useRef)(null),_=e=>{let t=g.current?.getBoundingClientRect();!t||t.width===0||p(Math.min(100,Math.max(0,(e-t.left)/t.width*100)))},v=e=>{h(!0),e.currentTarget.setPointerCapture(e.pointerId),_(e.clientX)},y=e=>{m&&_(e.clientX)},b=e=>{h(!1),e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId)},x=e=>{let t=e.shiftKey?10:2;e.key===`ArrowLeft`&&(p(e=>Math.max(0,e-t)),e.preventDefault()),e.key===`ArrowRight`&&(p(e=>Math.min(100,e+t)),e.preventDefault())},S=e=>e.src?(0,s.jsx)(`img`,{src:e.src,alt:e.alt,className:r(`w-full`,l),loading:`lazy`,decoding:`async`}):(0,s.jsx)(`div`,{role:`img`,"aria-label":e.alt,className:r(`w-full border border-[var(--mt-border)] bg-[var(--mt-card-bg)]`,l)});return(0,s.jsxs)(`div`,{ref:g,onPointerDown:v,onPointerMove:y,onPointerUp:b,onPointerCancel:b,className:r(`relative touch-none overflow-hidden select-none`,c),children:[(0,s.jsx)(`div`,{className:`absolute inset-0 z-1`,children:S(e)}),(0,s.jsx)(`div`,{className:`absolute inset-0 z-2`,style:{clipPath:`polygon(${f}% 0, 100% 0, 100% 100%, ${f}% 100%)`},children:S(t)}),(0,s.jsx)(`div`,{"aria-hidden":`true`,className:r(`absolute top-0 z-3 h-full -translate-x-[1px]`,d===`manuscript`?`w-[3px] bg-[var(--amt-ink)]`:`w-[2px] bg-[var(--mt-accent)] shadow-[0_0_15px_var(--mt-accent)]`),style:{left:`${f}%`}}),d===`manuscript`?(0,s.jsx)(`div`,{"aria-hidden":!0,className:`absolute top-0 z-3 h-full w-px bg-[var(--amt-accent)]`,style:{left:`${f}%`}}):null,(0,s.jsxs)(`button`,{type:`button`,role:`slider`,"aria-label":n,"aria-valuenow":Math.round(f),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:x,style:{left:`${f}%`,width:u,height:u},className:r(`absolute top-1/2 z-3 flex -translate-x-1/2 -translate-y-1/2 cursor-grab items-center justify-between px-1 text-white active:cursor-grabbing`,d===`manuscript`?`justify-center border-[3px] border-[var(--amt-ink)] bg-[var(--amt-accent)] shadow-[3px_3px_0_0_var(--amt-ink)]`:`rounded-full bg-[var(--mt-accent)] shadow-[0_0_15px_var(--mt-accent)]`),children:[(0,s.jsx)(i,{className:`size-3.5`,"aria-hidden":`true`}),(0,s.jsx)(a,{className:`-ml-0.5 size-3.5`,"aria-hidden":`true`})]})]})}var l={width:225,height:300},u=4500,d=6e3;function f({work:e,reverse:t,previousLabel:n,nextLabel:f,handleLabel:p,tablistLabel:m}){let[h,g]=(0,o.useState)(0),[_,v]=(0,o.useState)(0),y=(0,o.useRef)(0),b=e.pairs.length,x=e.pairs[h];(0,o.useEffect)(()=>{if(b<=1)return;let e=0,t=n=>{window.clearTimeout(e),e=window.setTimeout(()=>{if(Date.now()<y.current){t(Math.max(200,y.current-Date.now()));return}g(e=>(e+1)%b),t(u)},n)};return t(u),()=>window.clearTimeout(e)},[b,e.title,_]);let S=(0,o.useCallback)(()=>{y.current=Date.now()+d,v(e=>e+1)},[]),C=e=>{S(),g(t=>(t+e+b)%b)},w=e=>{S(),g(e)},T=(0,s.jsxs)(`div`,{className:`flex w-full flex-col items-center text-center lg:w-[200px] lg:shrink-0`,children:[(0,s.jsx)(`div`,{className:`w-[140px] border-[3px] border-[var(--amt-ink)] bg-[var(--amt-paper)] shadow-[6px_6px_0_0_var(--amt-ink)] sm:w-[160px]`,children:(0,s.jsx)(`img`,{src:e.cover.src,alt:e.cover.alt,width:l.width,height:l.height,className:`block w-full object-cover`,style:{aspectRatio:`225 / 300`},loading:`lazy`,decoding:`async`})}),(0,s.jsx)(`h3`,{className:`amt-heading mt-4 text-[22px] text-[var(--amt-ink)] uppercase md:text-[26px]`,children:e.title}),(0,s.jsx)(`p`,{className:`amt-label mt-1 text-[11px] text-[var(--amt-accent)]`,children:e.author}),(0,s.jsx)(`p`,{className:`mt-3 max-w-xs text-[14px] leading-6 text-[var(--amt-text-muted)]`,children:e.synopsis})]}),E=(0,s.jsxs)(`div`,{className:`w-full min-w-0 flex-1`,children:[(0,s.jsx)(`div`,{role:`tablist`,"aria-label":m,className:`mb-4 flex flex-wrap justify-center gap-2`,children:e.pairs.map((e,t)=>{let n=t===h;return(0,s.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":n,onClick:()=>w(t),className:r(`amt-label border-[3px] border-[var(--amt-ink)] px-4 py-2 text-[12px] transition-all`,n?`bg-[var(--amt-accent)] text-white shadow-[4px_4px_0_0_var(--amt-ink)]`:`bg-[var(--amt-paper)] text-[var(--amt-ink)] hover:-translate-y-0.5`),children:e.label},e.id)})}),(0,s.jsxs)(`div`,{className:`relative mx-auto max-w-3xl`,children:[(0,s.jsx)(`button`,{type:`button`,"aria-label":n,onClick:()=>C(-1),className:`absolute top-1/2 -left-3 z-10 flex size-10 -translate-y-1/2 items-center justify-center border-[3px] border-[var(--amt-ink)] bg-[var(--amt-paper)] text-[var(--amt-ink)] shadow-[3px_3px_0_0_var(--amt-ink)] md:-left-5`,children:(0,s.jsx)(i,{className:`size-5`,"aria-hidden":!0})}),(0,s.jsx)(`div`,{className:`border-[3px] border-[var(--amt-ink)] bg-[var(--amt-paper)] p-1.5 shadow-[8px_8px_0_0_var(--amt-ink)]`,children:x?(0,s.jsx)(c,{before:x.before,after:x.after,handleLabel:p,variant:`manuscript`,className:`aspect-[16/10] w-full border-2 border-[var(--amt-ink)] contrast-125`,imageClassName:`h-full w-full object-cover object-top`},x.id):null}),(0,s.jsx)(`button`,{type:`button`,"aria-label":f,onClick:()=>C(1),className:`absolute top-1/2 -right-3 z-10 flex size-10 -translate-y-1/2 items-center justify-center border-[3px] border-[var(--amt-ink)] bg-[var(--amt-paper)] text-[var(--amt-ink)] shadow-[3px_3px_0_0_var(--amt-ink)] md:-right-5`,children:(0,s.jsx)(a,{className:`size-5`,"aria-hidden":!0})})]})]});return(0,s.jsx)(`div`,{className:`amt-panel relative overflow-hidden p-5 md:p-8`,children:(0,s.jsxs)(`div`,{className:r(`flex flex-col items-center gap-8 lg:flex-row lg:items-center lg:justify-center lg:gap-10`,t&&`lg:flex-row-reverse`),children:[T,E]})})}export{f as ExampleCard};