From 7dbf2edbceffa9feab5753d38ebc24847acbebac Mon Sep 17 00:00:00 2001
From: polina4096 <polina4096@yandex.ru>
Date: Sat, 18 Jan 2025 08:29:18 +0300
Subject: [PATCH] Use `cn` instead of format strings for conditional classes

---
 packages/repl/src/components/nav/NavbarMenu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/repl/src/components/nav/NavbarMenu.tsx b/packages/repl/src/components/nav/NavbarMenu.tsx
index 7d0697f..9277a56 100644
--- a/packages/repl/src/components/nav/NavbarMenu.tsx
+++ b/packages/repl/src/components/nav/NavbarMenu.tsx
@@ -116,7 +116,7 @@ export function NavbarMenu(props: {
                       <span>Light</span>
                     </div>
                     <div>
-                      <LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'light' ? 'hidden' : ''}`} />
+                      <LucideCheck class={cn('ml-auto size-4', localColorMode() !== 'light' && 'hidden')} />
                     </div>
                   </div>
                 </DropdownMenuItem>
@@ -127,7 +127,7 @@ export function NavbarMenu(props: {
                       <span>Dark</span>
                     </div>
                     <div>
-                      <LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'dark' ? 'hidden' : ''}`} />
+                      <LucideCheck class={cn('ml-auto size-4', localColorMode() !== 'dark' && 'hidden')} />
                     </div>
                   </div>
                 </DropdownMenuItem>
@@ -138,7 +138,7 @@ export function NavbarMenu(props: {
                       <span>System</span>
                     </div>
                     <div>
-                      <LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'system' ? 'hidden' : ''}`} />
+                      <LucideCheck class={cn('ml-auto size-4', localColorMode() !== 'system' && 'hidden')} />
                     </div>
                   </div>
                 </DropdownMenuItem>