feat : update

components/auth/profile-form.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/card";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { ProfileImageInput } from "./profile-image-input";
 
 export function ProfileForm({
   name: initialName,
@@ -40,20 +41,6 @@ export function ProfileForm({
     [preview],
   );
 
-  function chooseFile(next: File | null) {
-    setError("");
-    if (
-      next &&
-      (next.size > 6 * 1024 * 1024 ||
-        !["image/png", "image/jpeg", "image/webp"].includes(next.type))
-    ) {
-      setError("ใช้รูป PNG, JPEG หรือ WebP ขนาดไม่เกิน 6 MB");
-      return;
-    }
-    setFile(next);
-    setPreview(next ? URL.createObjectURL(next) : null);
-  }
-
   async function save(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (busy) return;
@@ -102,22 +89,14 @@ export function ProfileForm({
                     {name.trim().charAt(0).toUpperCase() || "?"}
                   </AvatarFallback>
                 </Avatar>
-                <Input
+                <ProfileImageInput
                   id="profile-image"
-                  type="file"
-                  accept="image/png,image/jpeg,image/webp"
-                  onChange={(event) => {
-                    const selected = event.target.files?.[0] ?? null;
-                    chooseFile(selected);
-                    if (
-                      selected &&
-                      (selected.size > 6 * 1024 * 1024 ||
-                        !["image/png", "image/jpeg", "image/webp"].includes(
-                          selected.type,
-                        ))
-                    )
-                      event.target.value = "";
+                  onChange={(cropped) => {
+                    setFile(cropped);
+                    setPreview(URL.createObjectURL(cropped));
+                    setError("");
                   }}
+                  onError={setError}
                   disabled={busy}
                 />
               </div>