https://www.frederic-leighton.org/assets/slideshow_._html-ByWQ3-PJ.js

1import{r as e,t}from"./jsx-runtime-DGeXAQPT.js";import{t as n}from"./react-BhjfaixL.js";import{t as r}from"./link-VOFt2yun.js";import{S as i,k as a,x as o}from"./index-Du2F0RY9.js";var s=e(n()),c=t();function l(){let{artist:e}=i.useLoaderData(),[t,n]=(0,s.useState)(()=>e.paintings.slice(0,10)),[l,u]=(0,s.useState)(0);(0,s.useEffect)(()=>{let t=[...e.paintings];for(let e=t.length-1;e>0;e--){let n=Math.floor(Math.random()*(e+1));[t[e],t[n]]=[t[n],t[e]]}n(t.slice(0,10)),u(0)},[e.paintings]);let d=t.length,f=(0,s.useCallback)(()=>u(e=>(e-1+d)%d),[d]),p=(0,s.useCallback)(()=>u(e=>(e+1)%d),[d]);(0,s.useEffect)(()=>{if(d===0)return;let e=e=>{e.key===`ArrowLeft`?f():e.key===`ArrowRight`&&p()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[f,p,d]),(0,s.useEffect)(()=>{if(d===0)return;let e=window.setInterval(p,5e3);return()=>window.clearInterval(e)},[p,d]);let m=t[l];return(0,c.jsxs)(`div`,{className:`mx-auto max-w-5xl px-6 py-12`,children:[(0,c.jsxs)(`header`,{className:`border-b border-border pb-6`,children:[(0,c.jsxs)(`h1`,{className:`font-display text-3xl text-foreground md:text-4xl`,children:[e.name,` Slideshow`]}),(0,c.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:`Use ← / → to navigate. Click the image to view it in full size.`})]}),m?(0,c.jsxs)(`div`,{className:`mt-8`,children:[(0,c.jsxs)(`div`,{className:`relative bg-muted`,children:[(0,c.jsx)(r,{to:a(m),className:`block`,children:(0,c.jsx)(`div`,{className:`relative flex h-[70vh] items-center justify-center overflow-hidden`,children:(0,c.jsx)(o,{src:m.image,alt:`${m.title} by ${e.name}`,className:`max-h-full max-w-full object-contain`},m.slug)})}),(0,c.jsx)(`button`,{type:`button`,onClick:f,"aria-label":`Previous painting`,className:`absolute left-3 top-1/2 -translate-y-1/2 rounded-full bg-black/50 px-4 py-2 text-white hover:bg-black/70`,children:`‹`}),(0,c.jsx)(`button`,{type:`button`,onClick:p,"aria-label":`Next painting`,className:`absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-black/50 px-4 py-2 text-white hover:bg-black/70`,children:`›`})]}),(0,c.jsxs)(`div`,{className:`mt-4 flex items-center justify-between`,children:[(0,c.jsxs)(`p`,{className:`font-display text-lg text-foreground`,children:[m.title,m.year?(0,c.jsxs)(`span`,{className:`ml-2 text-sm text-muted-foreground`,children:[`(`,m.year,`)`]}):null]}),(0,c.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[l+1,` / `,d]})]}),(0,c.jsx)(`div`,{className:`mt-4 flex flex-wrap gap-2`,children:t.map((e,t)=>(0,c.jsx)(`button`,{type:`button`,onClick:()=>u(t),"aria-label":`Go to ${e.title}`,className:`h-16 w-16 overflow-hidden border-2 ${t===l?`border-foreground`:`border-transparent opacity-70 hover:opacity-100`}`,children:(0,c.jsx)(o,{src:e.image,alt:``,className:`h-full w-full object-cover`})},e.slug))})]}):null]})}export{l as component};