@ducor/react
Version:
admin template ui interface
89 lines (88 loc) • 4.05 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";
// badge.tsx
import { forwardRef } from "react";
import { getColor } from "../helpers/colors";
import { twJoin, twMerge } from "tailwind-merge";
import roundStyles from "../helpers/rounded";
const Badge = forwardRef((_a, ref) => {
var { label = "", position = "top-right", round = "md", color = "primary", children, className = "", variant = "solid" } = _a, props = __rest(_a, ["label", "position", "round", "color", "children", "className", "variant"]);
// Position classes
const positionClasses = {
"top-right": "-top-3 -right-5 ",
"top-left": "-top-3 -left-5 ",
"bottom-right": "-bottom-3 -right-5 ",
"bottom-left": "-bottom-3 -left-5 ",
"top-center": "-top-3 left-1/2 translate-x-[-50%]",
"bottom-center": "-bottom-3 left-1/2 translate-x-[-50%]",
"left-center": "left-0 top-1/2 translate-y-[-50%] translate-x-[-80%]",
"right-center": "right-0 top-1/2 translate-y-[-50%] translate-x-[80%]",
};
if (!children) {
return (_jsx("div", Object.assign({ ref: ref, className: twMerge("text-xs font-semibold flex justify-center items-center", round === "full" ? "py-0.5 px-1 " : `px-2 py-0.5`, roundStyles[round], getColor({
variant,
color,
active: true,
}), className) }, props, { children: label })));
}
return (_jsxs("div", Object.assign({ className: 'relative', ref: ref }, props, { children: [_jsx("span", { className: twMerge("absolute", "text-xs font-semibold ", round === "full" ? "px-0.5 py-1" : `px-2 py-0.5`, positionClasses[position], roundStyles[round], getColor({
variant: "solid",
color,
}), className), children: label }), children] })));
});
const colors = {
default: {
bg: "bg-gray-700",
border: "border-gray-700",
},
primary: {
bg: "bg-blue-400",
border: "border-blue-400",
},
info: {
bg: "bg-teal-500",
border: "border-teal-500",
},
success: {
bg: "bg-green-600",
border: "border-green-600",
},
warning: {
bg: "bg-yellow-500",
border: "border-yellow-500",
},
danger: {
bg: "bg-red-500",
border: "border-red-500",
},
secondary: {
bg: "bg-purple-500",
border: "border-purple-500",
},
};
const positionClasses = {
"top-right": "-top-2 -right-2",
"top-left": "-top-2 -left-2",
"bottom-right": "-bottom-2 -right-2",
"bottom-left": "-bottom-2 -left-2",
};
const Dot = forwardRef((_a, ref) => {
var { color = "primary", children, position = "top-right", className } = _a, props = __rest(_a, ["color", "children", "position", "className"]);
const { bg, border } = colors[color] || colors.danger;
const positionClass = positionClasses[position];
const center = "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full";
return (_jsxs("div", Object.assign({ className: 'relative group', ref: ref }, props, { children: [_jsx("div", { className: twMerge("absolute size-6 z-10", positionClass), children: _jsxs("div", { className: 'relative size-full', children: [_jsx("span", { className: twJoin(center, `heartbit border-4 size-full ${border}`) }), _jsx("span", { className: twJoin(center, bg, `size-1.5`) })] }) }), children] })));
});
Badge.displayName = "Badge";
Dot.displayName = "Badge.Dot";
export default Object.assign(Badge, { Dot });