Function Prose

apps/baseai.dev/src/components/Prose.tsx:3–24

({
	as,
	className,
	...props
}: Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'className'> & {
	as?: T;
	className?: string;
})

import clsx from 'clsx';

export function 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}
		/>
	);
}