Files
formbricks/apps/docs/components/Prose.tsx

25 lines
701 B
TypeScript

import clsx from "clsx";
export const Prose = <T extends React.ElementType = "div">({
as,
className,
...props
}: Omit<React.ComponentPropsWithoutRef<T>, "as" | "className"> & {
as?: T;
className?: string;
}) => {
let Component = as ?? "div";
return (
<Component
className={clsx(
className,
"prose dark:prose-invert",
// `html :where(& > *)` is used to select all direct children without an increase in specificity like you'd get from just `& > *`
"[html_:where(&>*)]:mx-auto [html_:where(&>*)]:max-w-2xl [html_:where(&>*)]:lg:mx-[calc(50%-min(50%,theme(maxWidth.lg)))] [html_:where(&>*)]:lg:max-w-3xl"
)}
{...props}
/>
);
};