UNPKG

nextuiq

Version:

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

2 lines (1 loc) 1.41 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js");exports.Avatar=({src:t,alt:r="",size:s="md",fallback:a,className:o="",status:l,id:n=`avatar-${Math.random().toString(36).substr(2,9)}`})=>{const i={sm:"w-8 h-8 text-xs",md:"w-10 h-10 text-sm",lg:"w-12 h-12 text-base"},m=`${r||a||"User avatar"} ${l?`Status: ${l}`:""}`.trim();return e.jsxRuntimeExports.jsxs("div",{className:"relative inline-block",role:"img","aria-label":m,id:n,children:[t?e.jsxRuntimeExports.jsx("img",{src:t,alt:r,className:`rounded-full object-cover ${i[s]} ${o}`,role:"presentation"}):e.jsxRuntimeExports.jsx("div",{className:`rounded-full flex items-center justify-center \n bg-[oklch(var(--theme-muted))] \n text-[oklch(var(--theme-foreground))] \n font-medium ${i[s]} ${o}`,"aria-hidden":"true",children:a?(c=a,c.split(" ").map((e=>e[0])).join("").toUpperCase().slice(0,2)):"?"}),l&&e.jsxRuntimeExports.jsx("span",{className:`absolute bottom-0 right-0 block rounded-full \n ring-2 ring-[oklch(var(--theme-background))] \n ${{online:"bg-[oklch(var(--theme-success))]",offline:"bg-[oklch(var(--theme-muted-foreground))]",busy:"bg-[oklch(var(--theme-error))]",away:"bg-[oklch(var(--theme-warning))]"}[l]} \n ${"sm"===s?"w-2 h-2":"w-3 h-3"}`,"aria-hidden":"true",role:"status",title:`User is ${l}`})]});var c};