BjAvatar

Composant React pour l’avatar DSBJ : image, initiales, icône Remix ou enfants ; tailles, carré et pastille de statut.

Utilisation

import { BjAvatar } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <>
      <BjAvatar src="https://i.pravatar.cc/100?img=3" alt="Photo de profil" />
      <BjAvatar initials="AK" />
      <BjAvatar icon="ri-user-line" />
      <BjAvatar status="online" src="https://i.pravatar.cc/100?img=8" alt="" />
    </>
  )
}

Aperçu

AKAKAK

Tailles

sm, md (défaut), lg et xl.

SMMDLGXL

import { BjAvatar } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <>
      <BjAvatar size="sm" initials="SM" />
      <BjAvatar size="md" initials="MD" />
      <BjAvatar size="lg" initials="LG" />
      <BjAvatar size="xl" initials="XL" />
    </>
  )
}

Contenu

src (image), initials, icon (classe Remix) ou enfants si rien d’autre.

AK?

import { BjAvatar } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <>
      <BjAvatar src="https://i.pravatar.cc/100?img=3" alt="Profile" />
      <BjAvatar initials="AB" />
      <BjAvatar icon="ri-user-line" />
      <BjAvatar>
        <span style={{ fontSize: '0.75rem' }}>?</span>
      </BjAvatar>
    </>
  )
}

Carré

square sur les quatre tailles.

SMMDLGXL

import { BjAvatar } from '@flrxnt/dsbj/react'

const sizes = ['sm', 'md', 'lg', 'xl'] as const

export default function App() {
  return (
    <>
      {sizes.map((size) => (
        <BjAvatar key={size} size={size} square initials={size.toUpperCase()} />
      ))}
    </>
  )
}

Statut

Quatre valeurs de statut sur une même base.

En ligne

Absent

Occupé

Hors ligne

import { BjAvatar } from '@flrxnt/dsbj/react'

const statuses = ['online', 'away', 'busy', 'offline'] as const

export default function App() {
  return (
    <>
      {statuses.map((status) => (
        <BjAvatar
          key={status}
          status={status}
          src="https://i.pravatar.cc/100?img=8"
          alt=""
        />
      ))}
    </>
  )
}

Combinaisons

Carré avec chaque statut, puis combinaisons taille + statut (ex. xl carré en ligne, initiales par taille).

Carré × statut

Taille × statut

SMLX

import { BjAvatar } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <>
      <BjAvatar size="xl" square status="online" src="https://i.pravatar.cc/100?img=12" alt="" />
      <BjAvatar size="sm" status="online" initials="S" />
      <BjAvatar size="md" status="away" initials="M" />
      <BjAvatar size="lg" status="busy" initials="L" />
      <BjAvatar size="xl" status="offline" initials="X" />
    </>
  )
}

Callbacks

Les attributs du span racine (ex. onClick) peuvent compléter le comportement.

import { BjAvatar } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjAvatar
      initials="JD"
      role="button"
      tabIndex={0}
      onClick={() => {
        console.log('avatar click')
      }}
    />
  )
}

Props

Prop	Description
`size`	Taille : sm, md (défaut), lg ou xl.
`square`	Variante carrée (bj-avatar--square).
`src`	URL de l’image ; si défini, affiche bj-avatar__img.
`alt`	Texte alternatif de l’image ; chaîne vide par défaut.
`initials`	Initiales si pas d’image ni d’icône (bj-avatar__initials).
`icon`	Classe d’icône Remix, par ex. ri-user-line, si pas d’image ni d’initiales.
`status`	Pastille de statut : online, away, busy ou offline.