components/empty-screen.tsx

import { useAtom } from 'jotai';
import { useDropzone } from 'react-dropzone';
import { targetImageAtom } from '../state';
import Image from 'next/image';

const examples = [
	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
];

export function EmptyScreen() {
	const [, setTarget] = useAtom(targetImageAtom);
	const { getRootProps, getInputProps } = useDropzone({
		accept: {
			'image/*': ['.jpeg', '.png'],
		},
		multiple: false,
		onDrop: async acceptedFiles => {
			try {
				const file = acceptedFiles[0];
				const reader = new FileReader();
				reader.onloadend = () => {
					setTarget(reader.result as string);
				};
				reader.readAsDataURL(file);
			} catch (err) {
				console.error(err);
			}
		},
	});
	return (
		<div className="mx-auto max-w-2xl px-4">
			<div className="rounded-lg border bg-background p-8">
				<h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
				<p>Lets start by choosing an image</p>
				<div
					{...getRootProps()}
					className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
				>
					<input {...getInputProps()} />
					<p className="text-gray-400 text-lg">
						Drag or drop image here, or click to select images
					</p>
				</div>
				<p className="mt-4 mb-2">
					You can also choose from below examples we provided
				</p>
				<div className="flex">
					{examples.map((example, index) => (
						<Image
							src={example}
							key={index}
							width={120}
							height={120}
							alt="example images"
							className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
							onClick={() => setTarget(example)}
						/>
					))}
				</div>
			</div>
		</div>
	);
}