Function ThemeCode

apps/www/src/components/theme-code.tsx:13–49

({ css }: ThemeCodeProps)

}

export const ThemeCode = ({ css }: ThemeCodeProps) => {
	const prettyCode = React.useMemo(() => {
		return highlighter.codeToHtml(css, {
			lang: "css",
			themes: {
				dark: "github-dark-default",
				light: "github-light-default",
			},
			transformers: [
				{
					pre(node) {
						node.properties.style = "tab-size: 2"
					},
					code(node) {
						node.properties.style = "tab-size: 2"
					},
				},
			],
		})
	}, [css])

	return (
		<div className="w-full overflow-hidden rounded-md border">
			<CodeBar
				label="globals.css"
				className="border-t-0"
				content={css}
				type="other"
			/>

			<div
				className="max-h-[600px] overflow-auto p-4 text-sm"
				dangerouslySetInnerHTML={{ __html: prettyCode }}
			/>
		</div>
	)
}