lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
40 lines • 2.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.badgeVariants = void 0;
exports.Badge = Badge;
const jsx_runtime_1 = require("react/jsx-runtime");
const class_variance_authority_1 = require("class-variance-authority");
const utils_1 = require("@/components/lib/utils");
const badgeVariants = (0, class_variance_authority_1.cva)("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
variants: {
variant: {
default: "border-transparent bg-primary text-primary-foreground",
secondary: "border-transparent bg-secondary text-secondary-foreground",
destructive: "border-transparent bg-red-500 text-white",
outline: "text-foreground",
success: "border-transparent bg-green-500 text-white",
warning: "border-transparent bg-amber-500 text-white",
info: "border-transparent bg-primarylw text-white",
},
size: {
default: "px-2.5 py-0.5 text-xs",
sm: "px-2 py-0.5 text-xs",
lg: "px-3 py-1 text-sm",
},
shape: {
default: "rounded-full",
square: "rounded-sm",
rounded: "rounded-md",
}
},
defaultVariants: {
variant: "default",
size: "default",
shape: "default",
},
});
exports.badgeVariants = badgeVariants;
function Badge({ className, variant, size, shape, withDot, dotColor = "currentColor", interactive, highlighted, ...props }) {
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(badgeVariants({ variant, size, shape }), interactive && "cursor-pointer hover:opacity-80", highlighted && "ring-2 ring-offset-2 ring-ring", className), ...props, children: [withDot && ((0, jsx_runtime_1.jsx)("span", { className: "mr-1 h-1.5 w-1.5 rounded-full inline-block", style: { backgroundColor: dotColor } })), props.children] }));
}
//# sourceMappingURL=badge.js.map