From 80be2b711bb4828cdcf253d4079303607b2e31a2 Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@nym.sh>
Date: Thu, 12 Mar 2026 22:36:43 +0000
Subject: [PATCH] fix(client): render showcase as JSX component

Co-authored-by: Ona <no-reply@ona.com>
---
 apps/aelis-client/src/app/components/[name].tsx | 4 +++-
 apps/aelis-client/src/components/showcase.tsx   | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/aelis-client/src/app/components/[name].tsx b/apps/aelis-client/src/app/components/[name].tsx
index 54e8eef..86ece3b 100644
--- a/apps/aelis-client/src/app/components/[name].tsx
+++ b/apps/aelis-client/src/app/components/[name].tsx
@@ -38,9 +38,11 @@ export default function ComponentDetailScreen() {
 		)
 	}
 
+	const ShowcaseComponent = showcase.component
+
 	return (
 		<ScrollView style={tw`bg-stone-100 dark:bg-stone-900 flex-1`} contentContainerStyle={tw`px-5 pb-10 pt-4 gap-6`}>
-			{showcase.component()}
+			<ShowcaseComponent />
 		</ScrollView>
 	)
 }
diff --git a/apps/aelis-client/src/components/showcase.tsx b/apps/aelis-client/src/components/showcase.tsx
index 04d74a7..f5424e4 100644
--- a/apps/aelis-client/src/components/showcase.tsx
+++ b/apps/aelis-client/src/components/showcase.tsx
@@ -5,7 +5,7 @@ import { SansSerifText } from "./ui/sans-serif-text"
 
 export type Showcase = {
 	title: string
-	component: () => React.ReactNode
+	component: React.ComponentType
 }
 
 export function Section({ title, children }: { title: string; children: React.ReactNode }) {