@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
38 lines • 1.58 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
var headingStyles = {
1: "h1 text-4xl md:text-5xl lg:text-6xl",
2: "h2 text-3xl md:text-4xl lg:text-5xl",
3: "h3 text-2xl md:text-3xl lg:text-4xl",
4: "h4 text-xl md:text-2xl lg:text-3xl",
5: "h5 text-lg md:text-xl lg:text-2xl",
6: "h6 text-base md:text-lg lg:text-xl",
};
var headingWeights = {
bold: "font-bold opacity-95",
semibold: "font-semibold opacity-95",
medium: "font-medium",
normal: "font-normal",
light: "font-light",
};
var headingCase = {
normal: "normal-case",
capitalize: "capitalize",
uppercase: "uppercase",
lowercase: "lowercase",
};
var aligns = {
left: "text-left",
center: "text-center",
right: "text-right",
};
var getHeadingTag = function (level) {
return level ? "h".concat(level) : "h1";
};
var Heading = function (_a) {
var _b = _a.level, level = _b === void 0 ? 1 : _b, _c = _a.weight, weight = _c === void 0 ? "semibold" : _c, _d = _a.align, align = _d === void 0 ? "left" : _d, _e = _a.transform, transform = _e === void 0 ? "normal" : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
var Tag = getHeadingTag(level);
return (_jsx(Tag, { className: twMerge("".concat(headingStyles[level], " ").concat(headingWeights[weight], " ").concat(aligns[align], " ").concat(headingCase[transform], " ").concat(className, " mb-[.5em]"), className), role: "heading", children: children }));
};
export default Heading;
//# sourceMappingURL=Heading.js.map