@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
22 lines • 1.36 kB
JavaScript
import { jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
var sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg",
xl: "text-xl",
xxl: "text-2xl",
};
var footerAligns = {
left: "text-left",
right: "text-right",
};
var Blockquote = function (_a) {
var text = _a.text, author = _a.author, _b = _a.footerAlign, footerAlign = _b === void 0 ? "right" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, cite = _a.cite, _d = _a.className, className = _d === void 0 ? "" : _d, style = _a.style;
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
var alignClasses = useMemo(function () { return footerAligns[footerAlign]; }, [footerAlign]);
return (_jsxs("blockquote", { className: twMerge("blockquote border-l-[.5em] border-gray-500 px-4 py-2 italic bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 ".concat(sizeClasses), className), cite: cite, style: style, children: [_jsxs("p", { className: "blockquote-text mb-2", children: ["\u201C", text, "\u201D"] }), author && (_jsxs("footer", { className: "blockquote-footer text-[.8em] ".concat(alignClasses, " font-semibold text-gray-700 dark:text-gray-300"), children: ["\u2014 ", author] }))] }));
};
export default Blockquote;
//# sourceMappingURL=Blockquote.js.map