font settings

website/src/repl/components/panel/Reference.jsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import jsdocJson from '../../../../../doc.json';
-import { useSettings } from '@src/settings.mjs';
+
 const availableFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
@@ -15,8 +15,6 @@ const getInnerText = (html) => {
 export function Reference() {
   const [search, setSearch] = useState('');
 
-  const {fontFamily} = useSettings()
-
   const visibleFunctions = useMemo(() => {
     return availableFunctions.filter((entry) => {
       if (!search) {
@@ -28,7 +26,7 @@ export function Reference() {
   }, [search]);
 
   return (
-    <div className="flex h-full w-full p-2 overflow-hidden" style={{fontFamily}}>
+    <div className="flex h-full w-full p-2 overflow-hidden">
       <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
         <div class="w-full flex">
           <input
@@ -59,17 +57,17 @@ export function Reference() {
         id="reference-container"
       >
         <div className="prose dark:prose-invert min-w-full px-1 ">
-          <h2 >API Reference</h2>
+          <h2>API Reference</h2>
           <p>
             This is the long list of functions you can use. Remember that you don't need to remember all of those and
             that you can already make music with a small set of functions!
           </p>
           {visibleFunctions.map((entry, i) => (
             <section key={i}>
-              <h3  id={`doc-${i}`}>{entry.name}</h3>
+              <h3 id={`doc-${i}`}>{entry.name}</h3>
               {!!entry.synonyms_text && (
                 <p>
-                  Synonyms: <code className='text-foreground'>{entry.synonyms_text}</code>
+                  Synonyms: <code className="text-foreground">{entry.synonyms_text}</code>
                 </p>
               )}
               {/* <small>{entry.meta.filename}</small> */}
@@ -82,7 +80,9 @@ export function Reference() {
                 ))}
               </ul>
               {entry.examples?.map((example, j) => (
-                <pre className='bg-background' key={j}>{example}</pre>
+                <pre className="bg-background" key={j}>
+                  {example}
+                </pre>
               ))}
             </section>
           ))}