fix: refactor ComparisonSlider to use imported images for production
This commit is contained in:
@@ -1,5 +1,7 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
import { MoveHorizontal } from 'lucide-react';
|
import { MoveHorizontal } from 'lucide-react';
|
||||||
|
import CompareNew from '../assets/images/compare-new.png';
|
||||||
|
import CompareOld from '../assets/images/compare-old.png';
|
||||||
|
|
||||||
export const ComparisonSlider = () => {
|
export const ComparisonSlider = () => {
|
||||||
const [sliderPos, setSliderPos] = useState(50);
|
const [sliderPos, setSliderPos] = useState(50);
|
||||||
@@ -41,7 +43,7 @@ export const ComparisonSlider = () => {
|
|||||||
{/* AFTER IMAGE (New Way) - Background */}
|
{/* AFTER IMAGE (New Way) - Background */}
|
||||||
<div className="absolute inset-0 w-full h-full">
|
<div className="absolute inset-0 w-full h-full">
|
||||||
<img
|
<img
|
||||||
src="/src/assets/images/compare-new.png"
|
src={CompareNew}
|
||||||
alt="The New Way"
|
alt="The New Way"
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
@@ -73,7 +75,7 @@ export const ComparisonSlider = () => {
|
|||||||
style={{ width: `${sliderPos}%` }}
|
style={{ width: `${sliderPos}%` }}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/src/assets/images/compare-old.png"
|
src={CompareOld}
|
||||||
alt="The Old Way"
|
alt="The Old Way"
|
||||||
className="w-full h-full object-cover max-w-none grayscale sepia-[0.3]"
|
className="w-full h-full object-cover max-w-none grayscale sepia-[0.3]"
|
||||||
style={{ width: containerRef.current?.offsetWidth }}
|
style={{ width: containerRef.current?.offsetWidth }}
|
||||||
|
|||||||
Reference in New Issue
Block a user