trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: image comparison changes

Browse source
This commit is contained in:
trafficlunar 2025-02-21 20:30:40 +00:00
parent 728c376885
commit 0f0039138c
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/home/ImageComparison.tsx
View file

@ -1,10 +1,10 @@
import { useState } from "react"; import { useState } from "react";
import { ChevronsLeftRightIcon } from "lucide-react"; import { GripVerticalIcon } from "lucide-react";
function ImageComparison() { function ImageComparison() {
const [sliderPosition, setSliderPosition] = useState(50); const [sliderPosition, setSliderPosition] = useState(50);
const onMouseMove = (e: React.MouseEvent) => { const onPointerMove = (e: React.MouseEvent) => {
if (e.buttons !== 1) return; if (e.buttons !== 1) return;
const rect = e.currentTarget.getBoundingClientRect(); const rect = e.currentTarget.getBoundingClientRect();
@ -14,8 +14,8 @@ function ImageComparison() {
return ( return (
<div <div
onPointerMove={onMouseMove} onPointerMove={onPointerMove}
className="relative select-none w-[40vw] h-[calc(40vw*217/270)] flex justify-center rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-md" className="relative select-none w-full aspect-[270/217] aspect flex justify-center rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-md"
> >
<img <img
src="/bliss/bliss_original.png" src="/bliss/bliss_original.png"
@ -39,9 +39,9 @@ function ImageComparison() {
left: `${sliderPosition}%`, left: `${sliderPosition}%`,
}} }}
> >
<div className="bg-zinc-200 rounded-full absolute w-12 h-12 -translate-x-1/2 flex justify-center items-center cursor-col-resize"> <button className="bg-zinc-200 rounded hover:scale-110 transition-all w-5 h-10 select-none -translate-y-1/2 absolute top-1/2 -ml-2 z-30 cursor-ew-resize flex justify-center items-center">
<ChevronsLeftRightIcon color="black" size={30} /> <GripVerticalIcon color="black" className="w-4 h-4" />
</div> </button>
</div> </div>
<span className="absolute top-[101.5%] left-1 text-zinc-500 text-xs">Windows XP Background 'Bliss' image owned by Microsoft Corporation</span> <span className="absolute top-[101.5%] left-1 text-zinc-500 text-xs">Windows XP Background 'Bliss' image owned by Microsoft Corporation</span>