From 5fc5a1197b33449c00d6fe48408a51390b7b86a1 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Thu, 28 Aug 2025 00:02:18 -0600
Subject: [PATCH] fix: improve code rendering logic in blog post page for
 inline and block code snippets

---
 .../website/app/[locale]/blog/[slug]/page.tsx | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/website/app/[locale]/blog/[slug]/page.tsx b/apps/website/app/[locale]/blog/[slug]/page.tsx
index fbe3fb5..d66366a 100644
--- a/apps/website/app/[locale]/blog/[slug]/page.tsx
+++ b/apps/website/app/[locale]/blog/[slug]/page.tsx
@@ -175,8 +175,23 @@ export default async function BlogPostPage({ params }: Props) {
 				className="object-cover max-w-lg mx-auto rounded-lg border max-lg:w-64 border-border overflow-hidden"
 			/>
 		),
-		code: ({ className, children }) => {
-			const match = /language-(\w+)/.exec(className || "");
+		code: ({
+			className,
+			children,
+			inline,
+		}: { className: string; children: React.ReactNode; inline: boolean }) => {
+			console.log(className, children, inline);
+			// Si es código inline (no tiene className con language-*), renderizar como span
+			if (inline || !className || !/language-(\w+)/.test(className)) {
+				return (
+					<code className="px-1.5 py-0.5 bg-muted text-sm rounded font-mono text-foreground">
+						{children}
+					</code>
+				);
+			}
+
+			// Si es un bloque de código, usar CodeBlock
+			const match = /language-(\w+)/.exec(className);
 			return (
 				<CodeBlock
 					lang={match ? (match[1] as BundledLanguage) : "ts"}
@@ -328,11 +343,11 @@ export default async function BlogPostPage({ params }: Props) {
 								>
 									<div className="bg-card rounded-lg overflow-hidden h-full shadow-lg transition-all duration-300 hover:shadow-xl border border-border">
 										{relatedPost.feature_image && (
-											<div className="relative h-48 w-full">
+											<div className="relative  w-full">
 												<img
 													src={relatedPost.feature_image || "/og.png"}
 													alt={relatedPost.title}
-													className="object-cover"
+													className="object-cover "
 												/>
 											</div>
 										)}