[V0_FILE]typescriptreact:file="app/page.tsx" import { ImageUploader } from '../components/ImageUploader' export default function Home() { return (

Light/Dark Image Transition

) } [V0_FILE]typescriptreact:file="components/ImageUploader.tsx" 'use client' import { useState } from 'react' import { ImageTransition } from './ImageTransition' export function ImageUploader() { const [lightImage, setLightImage] = useState(null) const [darkImage, setDarkImage] = useState(null) const handleImageUpload = (event: React.ChangeEvent, mode: 'light' | 'dark') => { const file = event.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { if (mode === 'light') { setLightImage(e.target?.result as string) } else { setDarkImage(e.target?.result as string) } } reader.readAsDataURL(file) } } return (

Light Mode Image handleImageUpload(e, 'light')} className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />

Dark Mode Image handleImageUpload(e, 'dark')} className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" />

{lightImage && darkImage && }

) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" [V0_FILE]typescriptreact:file="components/ImageTransition.tsx" isQuickEdit="true" 'use client' import { useState, useEffect, useRef } from 'react' interface ImageTransitionProps { lightImage: string darkImage: string } export function ImageTransition({ lightImage, darkImage }: ImageTransitionProps) { const [position, setPosition] = useState(50) const [isDragging, setIsDragging] = useState(false) const containerRef = useRef(null) const handleRef = useRef(null) useEffect(() => { const container = containerRef.current const handle = handleRef.current if (!container || !handle) return const onMouseDown = () => { setIsDragging(true) } const onMouseMove = (e: MouseEvent) => { if (!isDragging) return const containerRect = container.getBoundingClientRect() const newPosition = ((e.clientX - containerRect.left) / containerRect.width) * 100 setPosition(Math.max(0, Math.min(100, newPosition))) } const onMouseUp = () => { setIsDragging(false) } handle.addEventListener('mousedown', onMouseDown) document.addEventListener('mousemove', onMouseMove) document.addEventListener('mouseup', onMouseUp) return () => { handle.removeEventListener('mousedown', onMouseDown) document.removeEventListener('mousemove', onMouseMove) document.removeEventListener('mouseup', onMouseUp) } }, [isDragging]) return (

) }

About

About