@sikka/hawa
Version:
Modern UI Kit made with Tailwind
92 lines (89 loc) • 2.94 kB
JavaScript
"use client";
// elements/badge/Badge.tsx
import React, { useEffect, useState, useRef } from "react";
// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// elements/badge/Badge.tsx
var Badge = ({
anchor,
position = "right",
size = "default",
text,
className
}) => {
const [badgePosition, setBadgePosition] = useState(null);
const indicatorRef = useRef(null);
const sizeStyles = {
small: { top: 4, left: 6, right: 7, classes: "hawa-w-3 hawa-h-3" },
default: { top: 4, left: 7, right: 5, classes: "hawa-w-3 hawa-h-3" },
large: { top: 6, left: 12, right: 7, classes: "hawa-w-6 hawa-h-6" }
};
useEffect(() => {
const handlePositioning = () => {
var _a;
if (anchor.current && indicatorRef.current) {
const rect = anchor.current.getBoundingClientRect();
const parentRect = (_a = indicatorRef.current.parentElement) == null ? void 0 : _a.getBoundingClientRect();
const style = window.getComputedStyle(anchor.current);
const marginTop = parseFloat(style.marginTop.replace("px", ""));
const marginRight = parseFloat(style.marginRight.replace("px", ""));
if (parentRect) {
setBadgePosition({
top: rect.top - parentRect.top - marginTop - sizeStyles[size].top,
left: position === "right" ? parentRect.right - parentRect.left - sizeStyles[size].left : rect.right - parentRect.left - parentRect.width - marginRight - sizeStyles[size].right
});
}
}
};
handlePositioning();
window.addEventListener("resize", handlePositioning);
return () => {
window.removeEventListener("resize", handlePositioning);
};
}, [anchor]);
return /* @__PURE__ */ React.createElement("div", { ref: indicatorRef, className: cn("hawa-relative", className) }, badgePosition && /* @__PURE__ */ React.createElement(
"div",
{
style: {
position: "absolute",
top: badgePosition == null ? void 0 : badgePosition.top,
left: badgePosition == null ? void 0 : badgePosition.left
},
className: cn(
"hawa-origin-center hawa-rounded-full hawa-bg-red-500",
sizeStyles[size].classes,
"hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-text-[9px] hawa-text-white"
)
},
size === "large" && text && text
));
};
var BadgedComponent = ({
children,
className,
hideBadge,
position,
size,
text
}) => {
const ref = useRef(null);
return /* @__PURE__ */ React.createElement("div", { className: cn("hawa-relative hawa-w-fit", className), ref }, !hideBadge && /* @__PURE__ */ React.createElement(
Badge,
{
size,
text,
position,
anchor: ref,
className: "hawa-z-10"
}
), children);
};
export {
Badge,
BadgedComponent
};
//# sourceMappingURL=index.mjs.map