Avatar Uploader

import React from 'react';
import { AvatarUploader } from "@/components/ui/avatar-uploader";
import { cn } from '@/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

export default function DemoOne() {
  	const [photo, setPhoto] = React.useState<string>(
		'https://avatar.vercel.sh/john',
	);

	const handleUpload = async (file: File) => {
		setPhoto(URL.createObjectURL(file));
		return { success: true };
	};

	return (
		<div className="relative flex min-h-screen w-full flex-col items-center justify-center">
			<div
				aria-hidden="true"
				className={cn(
					'pointer-events-none absolute -top-10 left-1/2 size-full -translate-x-1/2 rounded-full',
					'bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]',
					'blur-[30px]',
				)}
			/>

			<AvatarUploader onUpload={handleUpload}>
				<Avatar className="relative size-20 cursor-pointer hover:opacity-50">
					<AvatarImage src={photo} />
					<AvatarFallback className="border text-2xl font-bold">
						JD
					</AvatarFallback>
				</Avatar>
			</AvatarUploader>
		</div>
	);
}