72Commencer

Profil

La section Profil des paramètres d’un produit d’IA. Recadrez une photo en cercle, choisissez un nom d’utilisateur vérifié pendant la saisie, confirmez une nouvelle adresse e-mail avec un code à 6 chiffres, ajoutez des liens qui reconnaissent le site et voyez une carte en direct de ce que les autres voient de vous.

Open in new tab

Vue d’ensemble

ProfileSettings est la page Profil d’un produit comme Claude ou Cursor, conçue pour s’intégrer dans n’importe quelle section de SettingsShell. Donnez-lui le profil enregistré et un onSave, et il gère le reste : un brouillon qui n’enregistre que sur demande, des erreurs de champ issues de vos contrôles ou de votre serveur, et la barre d’enregistrement flottante de Settings avec ⌘S.

En haut, une carte montre comment les autres voient votre profil et change pendant que vous écrivez : photo, nom, identifiant, bio et liens. Désactivez Show my profile et la carte s’estompe en indiquant que vous seul pouvez la voir. Copy link place l’URL du profil dans le presse-papiers.

Choisissez une photo, ou déposez-en une sur la ligne, et elle s’ouvre dans une boîte de recadrage. Faites-la glisser pour la déplacer, zoomez avec le curseur, la molette ou un pincement du pavé tactile, et la photo est recadrée en carré dans le navigateur avant d’arriver à onSave sous forme d’URL de données. Les fichiers d’un mauvais type, trop volumineux ou de moins de 128 pixels sont refusés dans la ligne avec la raison.

Le nom d’utilisateur est vérifié pendant la saisie, sans ralentir celle-ci. Les vérifications attendent 350ms après la dernière touche, les vérifications périmées sont annulées via un AbortSignal, et les noms déjà vérifiés répondent instantanément. Un nom pris affiche vos suggestions comme corrections en un geste. Si vous enregistrez avant la fin d’une vérification, l’enregistrement l’attend.

L’e-mail ne fait pas partie du brouillon. Change ouvre une boîte de dialogue en deux étapes : saisir la nouvelle adresse, puis le code à 6 chiffres envoyé à cette adresse, qui se vérifie tout seul dès le dernier chiffre. Un code erroné vibre et s’efface, Resend se débloque après 30 secondes, et la ligne se met à jour une fois le code confirmé. Une adresse non vérifiée affiche Resend link.

Les liens acceptent ce que les gens collent : github.com/you, une URL complète ou une adresse en www. Les sites connus reçoivent leur icône, les autres leur première lettre. À l’enregistrement, ils sont normalisés en URL https et les liens vides sont supprimés. Les adresses qui ne sont pas des liens ou qui en répètent un autre sont marquées une par une.

Installation

  1. Ajouter le registre Pro à components.json

    components.json
    {
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

  2. Ajouter votre token

    Créez un token sur votre page de compte et placez-le dans .env.local sous le nom HEXTAUI_PRO_TOKEN.

  3. Ajouter le block

    pnpm dlx shadcn@latest add @hextaui-pro/profile

Utilisation

Branchez-le à votre API

Passez le profil enregistré et un onSave qui renvoie des erreurs de champ ou lève une erreur. checkUsername reçoit un AbortSignal, donc les vérifications périmées sont annulées pendant la saisie.

"use client"

import { SettingsSection, SettingsShell } from "../settings/settings"

import { ProfileSettings, type ProfileValues } from "@/components/blocks/profile/profile"

export function ProfilePage({ profile, email }: { profile: ProfileValues; email: string }) {
  return (
    <SettingsShell sections={[{ id: "profile", label: "Profile" }]} className="h-svh">
      <SettingsSection id="profile">
        <ProfileSettings
          profile={profile}
          email={email}
          checkUsername={async (username, signal) => {
            const response = await fetch(`/api/usernames/${username}`, { signal })
            return response.json()
          }}
          onSave={async (values) => {
            const response = await fetch("/api/profile", {
              method: "PATCH",
              body: JSON.stringify(values),
            })
            if (response.status === 409) return { username: "That username is taken." }
            if (!response.ok) throw new Error("Check your connection and try again.")
          }}
        />
      </SettingsSection>
    </SettingsShell>
  )
}

Changer et vérifier l’e-mail

Ajoutez onRequestEmailCode et onVerifyEmailCode pour activer le bouton Change. Retournez un message depuis onRequestEmailCode pour refuser une adresse, et false depuis onVerifyEmailCode pour un code erroné.

"use client"

import * as React from "react"

import { SettingsSection, SettingsShell } from "../settings/settings"

import { ProfileSettings, type ProfileValues } from "@/components/blocks/profile/profile"

export function ProfileWithEmail({ profile, account }: {
  profile: ProfileValues
  account: { email: string; verified: boolean }
}) {
  const [email, setEmail] = React.useState(account.email)

  return (
    <SettingsShell sections={[{ id: "profile", label: "Profile" }]} className="h-svh">
      <SettingsSection id="profile">
        <ProfileSettings
          profile={profile}
          email={email}
          emailVerified={account.verified}
          onSave={(values) => fetch("/api/profile", { method: "PATCH", body: JSON.stringify(values) }).then(() => {})}
          onResendVerification={() => fetch("/api/email/verify", { method: "POST" })}
          onRequestEmailCode={async (next) => {
            const response = await fetch("/api/email/change", {
              method: "POST",
              body: JSON.stringify({ email: next }),
            })
            if (response.status === 409) return "That address belongs to another account."
            if (!response.ok) throw new Error("Couldn’t send the code. Try again.")
          }}
          onVerifyEmailCode={async (next, code) => {
            const response = await fetch("/api/email/change/verify", {
              method: "POST",
              body: JSON.stringify({ email: next, code }),
            })
            return response.ok
          }}
          onEmailChange={setEmail}
        />
      </SettingsSection>
    </SettingsShell>
  )
}

Anatomie

Les parties à composer, de l’extérieur vers l’intérieur.

PartieDescription
ProfileSettingsLa section : carte d’aperçu, photo, nom, comment l’assistant vous appelle, nom d’utilisateur, bio, profil public, liens et e-mail.
ProfileCardL’aperçu en direct du profil public, avec Copy link. Utilisable seul.
AvatarCropDialogRecadre une image en carré par glisser, zoom et clavier, et renvoie une URL de données.
ChangeEmailDialogLe changement d’e-mail en deux étapes : nouvelle adresse, puis code à 6 chiffres.
useUsernameCheckVérifications de disponibilité d’un nom d’utilisateur, avec debounce, annulables et mises en cache.

Référence de l’API

ProfileSettings

À utiliser dans une SettingsSection.

PropTypePar défaut
profileCe qui est enregistré actuellement : { avatar, name, nickname, username, bio, links, public }. Quand cela change et qu’il n’y a pas de modifications, le brouillon le suit.
ProfileValues–
onSaveAppelé avec les valeurs nettoyées et les liens normalisés. Retournez { field: message } pour des erreurs de champ, ou levez une erreur pour afficher le message dans la barre d’enregistrement.
(values) => void | errors | Promise<void | errors>–
emailL’adresse de connexion.
string–
emailVerifiedAffiche Verified, ou Not verified avec Resend link.
booleantrue
checkUsernameVérifie si un nom d’utilisateur est libre. Reçoit le nom en minuscules et un AbortSignal. Sans cela, seul le format est vérifié.
(username, signal) => Promise<{ available, message?, suggestions? }>–
onRequestEmailCodeEnvoie un code à une nouvelle adresse. Retournez un message pour refuser l’adresse. Avec onVerifyEmailCode, active Change.
(email) => Promise<void | string>–
onVerifyEmailCodeVérifie le code. Retournez false pour un code erroné, ou levez une erreur pour afficher votre message.
(email, code) => Promise<boolean>–
onEmailChangeAppelé une fois la nouvelle adresse confirmée.
(email) => void–
onResendVerificationAjoute Resend link tant que l’adresse n’est pas vérifiée.
() => Promise<unknown>–
profileUrlL’URL du profil public, affichée sous le nom d’utilisateur et copiée par Copy link.
(username) => stringhttps://hexta.app/@username
assistantNameUtilisé dans « What should Hexta call you? ».
string"Hexta"
maxAvatarBytesPlus grande photo acceptée.
number5 MB
maxLinksNombre de liens qu’un profil peut avoir.
number5
maxBioLongueur de la bio, avec un compteur.
number160

ProfileCard

PropTypePar défaut
profileCe qu’il faut afficher.
{ avatar, name, username, bio, links, public }–
urlL’URL du profil à afficher et à copier.
string–
onCopiedAppelé après la copie du lien.
() => void–

AvatarCropDialog

PropTypePar défaut
sourceL’image à recadrer. Ouvert tant qu’elle est définie.
{ url, width, height } | null–
onOpenChangeEfface la source à la fermeture.
(open) => void–
onApplyRenvoie le carré recadré en WebP, ou en PNG là où WebP n’est pas pris en charge.
(dataUrl) => void–
outputSizePlus grand côté de la sortie en pixels. Ne dépasse jamais la taille du recadrage.
number512
maxZoomJusqu’où l’on peut zoomer.
number4

ChangeEmailDialog

PropTypePar défaut
openIndique s’il est ouvert.
boolean–
currentEmailAffiché dans l’introduction et refusé comme nouvelle adresse.
string–
onRequestCodeEnvoie le code. Retournez un message pour refuser.
(email) => Promise<void | string>–
onVerifyCodeVérifie le code.
(email, code) => Promise<boolean>–
onChangedAppelé après la confirmation du code, avant la fermeture de la boîte de dialogue.
(email) => void–
resendAfterSecondes avant le déblocage de Resend code.
number30

useUsernameCheck(username, options)

Renvoie { status, result, problem, retry, resolve }. status vaut idle, invalid, checking, available, taken ou error.

PropTypePar défaut
currentLe nom d’utilisateur enregistré, qui n’est jamais vérifié.
string–
checkVotre vérification de disponibilité.
(username, signal) => Promise<UsernameCheck>–
delayMillisecondes d’attente après l’arrêt de la saisie.
number350

Clavier

ToucheAction
EnterDans le dernier lien, ajoute un autre lien et y passe.
←→↑↓Dans la boîte de recadrage, déplace la photo. Shift déplace plus loin.
+−Dans la boîte de recadrage, zoome et dézoome. 0 réinitialise.
⌘SEnregistre tant que quelque chose n’est pas enregistré. Ctrl+S sous Windows et Linux.
EscFerme une boîte de dialogue et rend le focus au bouton qui l’a ouverte.

Accessibilité

  • Chaque champ est nommé par sa ligne, et les boutons qui répètent un mot disent sur quoi ils agissent : Upload photo, Change email, Remove link 2, github.com/you.
  • Les résultats de nom d’utilisateur, liens copiés, changements de photo, liens supprimés et e-mail modifié sont annoncés poliment. La vérification elle-même n’est pas annoncée, donc la saisie reste silencieuse.
  • Les erreurs de champ ne marquent que le champ fautif, et le focus passe au premier quand un enregistrement est refusé. Le code e-mail annonce la vérification, la confirmation et l’erreur.
  • Supprimer un lien place le focus sur le lien suivant, ou sur Add link s’il n’en reste aucun. Supprimer la photo place le focus sur Upload.
  • La zone de recadrage est focalisable et fonctionne avec les flèches et les touches plus et moins, et le curseur de zoom énonce sa valeur en pourcentage.
  • Sur les écrans tactiles, les champs de saisie utilisent un texte de 16px pour que iOS ne zoome pas, et les boutons d’icône ont des cibles de 44px.

Construit avec

Les composants HextaUI gratuits dont Profile est constitué. Chacun s’installe séparément.

Code

6 fichiers, ajoutés à components/blocks/profile.