@smitch/fluid
Version:
A Next/React ui-component libray.
15 lines (14 loc) • 1.07 kB
JavaScript
import { jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
var sizes = {
md: 'text-md',
lg: 'text-lg',
xl: 'text-xl',
};
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]);
return (_jsxs("blockquote", { className: twMerge("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: 'mb-2', children: ["\u201C", text, "\u201D"] }), author && (_jsxs("footer", { className: "text-[.8em] text-".concat(footerAlign, " font-semibold text-gray-500 dark:text-gray-400"), children: ["\u2014 ", author] }))] }));
};
export default Blockquote;