spb/groupe-ka Public

1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2"use client";34import { useRef, useState } from "react";56export default function AvatarEditor({ hasAvatar }: { hasAvatar: boolean }) {7  const fileRef = useRef<HTMLInputElement | null>(null);8  const [busy, setBusy] = useState(false);9  const [error, setError] = useState<string | null>(null);1011  async function upload(f: File | undefined) {12    if (!f) return;13    setBusy(true);14    setError(null);15    const fd = new FormData();16    fd.append("photo", f);17    const res = await fetch("/api/profile/avatar", { method: "POST", body: fd });18    const data = await res.json().catch(() => ({}));19    if (res.ok) {20      window.location.reload();21    } else {22      setError(data.error ?? "Téléversement impossible — réessayez.");23      setBusy(false);24    }25  }2627  async function remove() {28    setBusy(true);29    setError(null);30    await fetch("/api/profile/avatar", { method: "DELETE" });31    window.location.reload();32  }3334  return (35    <div className="flex flex-col gap-2">36      <div className="flex flex-wrap gap-3">37        <button38          type="button"39          className="btn btn-ghost"40          disabled={busy}41          onClick={() => fileRef.current?.click()}42        >43          {busy ? "Téléversement…" : hasAvatar ? "Changer la photo" : "Ajouter une photo"}44        </button>45        {hasAvatar && (46          <button47            type="button"48            className="btn btn-ghost"49            disabled={busy}50            onClick={remove}51          >52            Retirer la photo53          </button>54        )}55      </div>56      <p className="gk-mono text-[10.5px] text-ink-3">57        JPG, PNG ou WebP (8 Mo max) — recadrée en carré 512 px. Visible sur58        votre carte, votre carte Wallet et toutes les plateformes ·Ka.59      </p>60      {error && (61        <p className="rounded-md border-[1.5px] border-[#b3423a] bg-[#fbe9e7] px-3 py-2 text-[12.5px] font-medium text-[#7c2f2a]">62          {error}63        </p>64      )}65      <input66        ref={fileRef}67        type="file"68        accept="image/jpeg,image/png,image/webp"69        hidden70        onChange={(e) => upload(e.target.files?.[0] ?? undefined)}71      />72    </div>73  );74}75