add className option to Code, add max-w-max when in hero.saas

nuotsu · Jan 18, 2025 · 05e2523 · 05e2523
1 parent 35959c6
commit 05e2523
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/ui/modules/HeroSaaS.tsx b/src/ui/modules/HeroSaaS.tsx
@@ -31,7 +31,9 @@ export default function HeroSaaS({
 					value={content}
 					components={{
 						types: {
-							code: Code,
+							code: ({ value }) => (
+								<Code className="mx-auto max-w-max" value={value} />
+							),
 							'custom-html': ({ value }) => <CustomHTML {...value} />,
 							'reputation-block': ({ value }) => (
 								<Reputation

diff --git a/src/ui/modules/RichtextModule/Code.tsx b/src/ui/modules/RichtextModule/Code.tsx
@@ -3,17 +3,19 @@ import ClickToCopy from '@/ui/ClickToCopy'
 import css from './Code.module.css'
 import { cn } from '@/lib/utils'
 import { stegaClean } from 'next-sanity'
+import type { ComponentProps } from 'react'
 
 export default async function Code({
 	value,
+	className,
 }: {
 	value?: {
 		language: string
 		code: string
 		filename?: string
 		highlightedLines?: number[]
 	}
-}) {
+} & ComponentProps<'article'>) {
 	if (!value?.code) return null
 
 	const html = await codeToHtml(stegaClean(value.code), {
@@ -34,7 +36,7 @@ export default async function Code({
 
 	return (
 		<article
-			className="group relative !mb-2 !mt-6 rounded bg-ink/5"
+			className={cn('group relative !mb-2 !mt-6 rounded bg-ink/5', className)}
 			data-module="code"
 		>
 			{value.filename && (