From 32ee8dd628eea3ac250be22a0c28efa3d9069bb7 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 22 Apr 2025 14:19:25 +0200
Subject: [PATCH] feat: Update Snippet component to use For loop for rendering
 snippets

---
 app/components/Snippet.tsx | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/components/Snippet.tsx b/app/components/Snippet.tsx
index 77bd30d..136e09c 100644
--- a/app/components/Snippet.tsx
+++ b/app/components/Snippet.tsx
@@ -131,25 +131,25 @@ export function Snippet(props: SnippetProps) {
 					</div>
 				</nav>
 
-				{selectedTab() && (
-					<div class="mt-6">
-						{selectedTab().code && (
-							<Highlight
-								class={clsx(
-									"!pt-0 !px-1 max-h-96 overflow-auto mb-2",
-									props.dark && "dark text-white",
-								)}
-								language={(selectedTab() as SnippetTab).codeLanguage}
-								withLineNumbers={(selectedTab() as SnippetTab).withLineNumbers}
-							>
-								{(selectedTab() as SnippetTab).code}
-							</Highlight>
-						)}
-						{!selectedTab().code && (
-							<div class="pb-1">{(selectedTab() as CommonTab).children}</div>
-						)}
-					</div>
-				)}
+				<For each={props.snippets}>
+					{(tab) => (
+						<div class={clsx("mt-6", isActive(tab) ? "block" : "hidden")}>
+							{tab.code && (
+								<Highlight
+									class={clsx(
+										"!pt-0 !px-1 max-h-96 overflow-auto mb-2",
+										props.dark && "dark text-white",
+									)}
+									language={tab.codeLanguage}
+									withLineNumbers={tab.withLineNumbers}
+								>
+									{tab.code}
+								</Highlight>
+							)}
+							{!tab.code && <div class="pb-1">{tab.children}</div>}
+						</div>
+					)}
+				</For>
 			</div>
 		</div>
 	);