feat: dropzone dragging over effect

src/components/profile-settings/profile-picture.tsx

@@ -2,12 +2,13 @@ import { useRouter } from "next/navigation";
 import Image from "next/image";
 
 import { useCallback, useState } from "react";
-import { FileWithPath, useDropzone } from "react-dropzone";
+import { FileWithPath } from "react-dropzone";
 
 import { Icon } from "@iconify/react";
 import dayjs from "dayjs";
 
 import SubmitDialogButton from "./submit-dialog-button";
+import Dropzone from "../dropzone";
 
 export default function ProfilePictureSettings() {
 	const router = useRouter();
@@ -41,14 +42,6 @@ export default function ProfilePictureSettings() {
 		setNewPicture(acceptedFiles[0]);
 	}, []);
 
-	const { getRootProps, getInputProps } = useDropzone({
-		onDrop: handleDrop,
-		maxFiles: 1,
-		accept: {
-			"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp", ".heic"],
-		},
-	});
-
 	return (
 		<div className="grid grid-cols-2">
 			<div>
@@ -58,32 +51,21 @@ export default function ProfilePictureSettings() {
 
 			<div className="flex flex-col">
 				<div className="flex justify-end">
-					<div
-						{...getRootProps({
-							className:
-								"bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border border-2 border-dashed border-amber-500 select-none h-full w-sm",
-						})}
-					>
-						{newPicture ? (
-							<Image
-								src={URL.createObjectURL(newPicture)}
-								alt="new profile picture"
-								width={128}
-								height={128}
-								className="rounded-full aspect-square border-2 border-amber-500 object-cover"
-							/>
-						) : (
-							<>
-								<input {...getInputProps({ multiple: false })} />
-								<Icon icon="material-symbols:upload" fontSize={32} />
-								<p className="text-center text-xs">
-									Drag and drop your profile picture here
-									<br />
-									or click to open
-								</p>
-							</>
-						)}
-					</div>
+					<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
+						<p className="text-center text-xs">
+							Drag and drop your profile picture here
+							<br />
+							or click to open
+						</p>
+
+						<Image
+							src={newPicture ? URL.createObjectURL(newPicture) : "/guest.webp"}
+							alt="new profile picture"
+							width={96}
+							height={96}
+							className="rounded-full aspect-square border-2 border-amber-500 object-cover"
+						/>
+					</Dropzone>
 				</div>
 
 				<div className="flex justify-end gap-1 mt-2">