53 lines
2.7 KiB
JavaScript
53 lines
2.7 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function BeforeAfterSlider({ beforeUrl, afterUrl, beforeAlt = 'Original image', afterAlt = 'Enhanced image' }) {
|
|
const [position, setPosition] = React.useState(50)
|
|
|
|
if (!beforeUrl || !afterUrl) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Before / after</p>
|
|
<h3 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-white">Compare the original with the enhanced result</h3>
|
|
</div>
|
|
<span className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-slate-200">{position}%</span>
|
|
</div>
|
|
|
|
<div className="relative mt-5 overflow-hidden rounded-[24px] border border-white/10 bg-black/40">
|
|
<img src={beforeUrl} alt={beforeAlt} className="block w-full object-cover" />
|
|
<div className="pointer-events-none absolute inset-y-0 left-0 overflow-hidden border-r border-white/80" style={{ width: `${position}%` }}>
|
|
<img src={afterUrl} alt={afterAlt} className="block h-full w-full object-cover" />
|
|
</div>
|
|
|
|
<div className="pointer-events-none absolute inset-y-0 left-0" style={{ left: `calc(${position}% - 1px)` }}>
|
|
<div className="flex h-full items-center">
|
|
<div className="flex h-10 w-10 -translate-x-1/2 items-center justify-center rounded-full border border-white/80 bg-black/60 text-white shadow-[0_0_30px_rgba(15,23,42,0.5)]">
|
|
<i className="fa-solid fa-left-right text-xs" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pointer-events-none absolute left-3 top-3 rounded-full border border-white/10 bg-[#08111dd8] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-100">Original</div>
|
|
<div className="pointer-events-none absolute right-3 top-3 rounded-full border border-emerald-300/20 bg-emerald-400/12 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Enhanced</div>
|
|
</div>
|
|
|
|
<label className="mt-5 block">
|
|
<span className="sr-only">Adjust before and after comparison slider</span>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
step="1"
|
|
value={position}
|
|
onChange={(event) => setPosition(Number(event.target.value || 50))}
|
|
className="h-2 w-full cursor-pointer appearance-none rounded-full bg-white/10 accent-sky-300"
|
|
aria-label="Adjust before and after comparison slider"
|
|
/>
|
|
</label>
|
|
</div>
|
|
)
|
|
} |