@clutchd/avatar
Version:
A basic avatar component powered by next/image.
2 lines (1 loc) • 1.45 kB
JavaScript
import*as o from"react";function A({alt:t="An avatar image.",children:r="U",className:a,src:e,sizes:m,...g}){return o.createElement(s,{className:["relative select-none items-center justify-center truncate inline-flex size-12",m,a].join(" "),...g},o.createElement(o.Fragment,null,e&&o.createElement(v,{alt:t,src:e,sizes:m}),o.createElement(i,{className:"m-1 truncate"},r)))}A.displayName="Avatar";import{Primitive as P}from"@radix-ui/react-primitive";import*as I from"react";import*as c from"react";var p=c.createContext({loadingState:"idle",onLoadingStateChange:t=>{console.error("Avatar: onLoadingStateChange not implemented",t)}});function i({_context:t=p,children:r,...a}){return I.useContext(t).loadingState!=="loaded"?I.createElement(P.span,{...a},r):null}i.displayName="AvatarFallback";import{Image as x}from"@clutchd/image";import*as l from"react";function v({_context:t=p,fill:r=!0,src:a,...e}){if(!a)return null;let m=l.useContext(t);return l.createElement(x,{handleStateChange:m.onLoadingStateChange,fill:r,src:a,...e})}v.displayName="AvatarImage";import{Primitive as f}from"@radix-ui/react-primitive";import*as n from"react";function s({_context:t=p,children:r,...a}){let[e,m]=n.useState("idle");return n.createElement(p.Provider,{value:{loadingState:e,onLoadingStateChange:m}},n.createElement(f.span,{"data-loading-state":e,...a},r))}s.displayName="AvatarRoot";export{A as Avatar,i as AvatarFallback,v as AvatarImage,s as AvatarRoot};