@ducor/react
Version:
admin template ui interface
72 lines (71 loc) • 4.25 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { twMerge } from "tailwind-merge";
const sizeClasses = {
xs: "size-5 text-xs",
sm: "size-7 text-sm",
md: "h-10 w-10 text-base",
lg: "h-12 w-12 text-lg",
xl: "h-14 w-14 text-xl",
};
const variantClasses = {
circular: "rounded-full",
rounded: "rounded-lg",
};
const notificationColors = {
green: "bg-green-400",
red: "bg-red-400",
yellow: "bg-yellow-400",
blue: "bg-blue-400",
gray: "bg-gray-400",
};
const BaseAvatar = React.forwardRef((_a, ref) => {
var { src, alt = "", size = "md", variant = "circular", initials, notification, placeholder = false, className } = _a, props = __rest(_a, ["src", "alt", "size", "variant", "initials", "notification", "placeholder", "className"]);
const getInitials = (name) => {
return name
.split(" ")
.map((part) => part[0])
.join("")
.toUpperCase()
.slice(0, 2);
};
const notificationClass = (notification === null || notification === void 0 ? void 0 : notification.color)
? notificationColors[notification.color]
: notificationColors.green;
const notificationPosition = (notification === null || notification === void 0 ? void 0 : notification.position) === "bottom" ? "bottom-1" : "top-1";
return (_jsxs("div", Object.assign({ className: 'relative inline-block', ref: ref }, props, { children: [_jsx("div", { className: twMerge("relative inline-flex items-center justify-center bg-gray-100", sizeClasses[size], variantClasses[variant], "overflow-hidden", className), children: src ? (_jsx("img", { src: src, alt: alt, className: 'h-full w-full object-cover' })) : placeholder ? (_jsx("svg", { className: 'h-full w-full text-gray-300', fill: 'currentColor', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z' }) })) : initials ? (_jsx("span", { className: 'font-medium text-gray-600', children: getInitials(initials) })) : null }), notification && (_jsx("span", { className: twMerge("absolute right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white", notificationClass, notificationPosition) }))] })));
});
BaseAvatar.displayName = "Avatar";
const Group = React.forwardRef((_a, ref) => {
var { children, max = 5, size = "md", variant = "circular", direction = "bottom-to-top", className } = _a, props = __rest(_a, ["children", "max", "size", "variant", "direction", "className"]);
const childrenArray = React.Children.toArray(children);
const excess = childrenArray.length - max;
const visibleAvatars = childrenArray.slice(0, max);
return (_jsxs("div", Object.assign({ className: twMerge("flex", direction === "bottom-to-top" ? "-space-x-2" : "space-x-2", className), ref: ref }, props, { children: [visibleAvatars.map((child, index) => {
if (React.isValidElement(child)) {
return React.cloneElement(child, {
key: index,
size,
variant,
className: twMerge("ring-2 ring-white", child.props.className),
});
}
return child;
}), excess > 0 && (_jsx("div", { className: twMerge("relative inline-flex items-center justify-center bg-gray-100 ring-2 ring-white", sizeClasses[size], variantClasses[variant]), children: _jsxs("span", { className: 'font-medium text-gray-600', children: ["+", excess] }) }))] })));
});
Group.displayName = "Avatar.Group";
const Avatar = Object.assign(BaseAvatar, {
Group,
});
export default Avatar;