Gallery fixes

Author: mythz

src/gallery/components/CodeExample.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode, memo, useMemo } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
@@ -10,7 +10,30 @@ interface CodeExampleProps {
   children: ReactNode
 }
 
-export default function CodeExample({ title, description, code, language = 'tsx', children }: CodeExampleProps) {
+function CodeExample({ title, description, code, language = 'tsx', children }: CodeExampleProps) {
+  // Memoize the code block to prevent re-rendering when only children change
+  const codeBlock = useMemo(() => (
+    <div className="mb-4 rounded-lg overflow-hidden">
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        customStyle={{
+          margin: 0,
+          borderRadius: '0.5rem',
+          fontSize: '0.875rem',
+          backgroundColor: '#0f172a', // slate-900
+        }}
+        codeTagProps={{
+          style: {
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+          }
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  ), [code, language])
+
   return (
     <div className="mb-12">
       {title && (
@@ -25,25 +48,7 @@ export default function CodeExample({ title, description, code, language = 'tsx'
       )}
 
       {/* Code Block */}
-      <div className="mb-4 rounded-lg overflow-hidden">
-        <SyntaxHighlighter
-          language={language}
-          style={oneDark}
-          customStyle={{
-            margin: 0,
-            borderRadius: '0.5rem',
-            fontSize: '0.875rem',
-            backgroundColor: '#0f172a', // slate-900
-          }}
-          codeTagProps={{
-            style: {
-              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            }
-          }}
-        >
-          {code}
-        </SyntaxHighlighter>
-      </div>
+      {codeBlock}
 
       {/* Live Example */}
       <div className="not-prose border border-gray-200 dark:border-gray-800 rounded-lg p-6 bg-white dark:bg-gray-900">
@@ -53,3 +58,5 @@ export default function CodeExample({ title, description, code, language = 'tsx'
   )
 }
 
+export default memo(CodeExample)
+

src/gallery/pages/Autocomplete.tsx

@@ -51,15 +51,15 @@ export default function AutocompletePage() {
             )}
           </Autocomplete>
           <div className="mt-2 flex justify-end">
-            <p>
+            <div>
               <b className="text-gray-500">Single:</b>
               {simple && (
                 <div className="flex">
                   <img src={simple.profileUrl} className="w-8 h-8 rounded-full mr-2" alt={simple.displayName} />
                   <b className="text-lg">{simple.displayName}</b>
                 </div>
               )}
-            </p>
+            </div>
           </div>
         </div>
       </CodeExample>
@@ -102,15 +102,15 @@ export default function AutocompletePage() {
             )}
           </Autocomplete>
           <div className="mt-2 flex justify-end">
-            <p>
+            <div>
               <b className="text-gray-500">Single with Icon:</b>
               {contact && (
                 <div className="flex">
                   <img src={contact.profileUrl} className="w-8 h-8 rounded-full mr-2" alt={contact.displayName} />
                   <b className="text-lg">{contact.displayName}</b>
                 </div>
               )}
-            </p>
+            </div>
           </div>
         </div>
       </CodeExample>
@@ -156,7 +156,7 @@ export default function AutocompletePage() {
           </Autocomplete>
           <div className="mt-2">
             <div className="text-right"><b className="text-gray-500">Multiple with Icon:</b></div>
-            <p>
+            <div>
               {contacts.length > 0 && (
                 <div className="flex flex-wrap">
                   {contacts.map((c: any) => (
@@ -167,7 +167,7 @@ export default function AutocompletePage() {
                   ))}
                 </div>
               )}
-            </p>
+            </div>
           </div>
         </div>
       </CodeExample>