feat: Add prismThemes to Fence component

app/components/md/Tabs.tsx

@@ -54,7 +54,7 @@ export function Tabs({
     >
       <div className="relative">
         <div className="max-w-full overflow-x-auto overflow-y-hidden">
-          <ul className="!p-0 w-max flex items-stretch gap-2" aria-orientation="horizontal" role="tablist">
+          <ul className="!p-0 w-max flex items-stretch gap-1" aria-orientation="horizontal" role="tablist">
             {tabs.map((tab) => (
               <li key={tab.value} className="overflow-hidden" role="tab" aria-selected={selectedTab === tab.value}>
                 <TabItem tab={tab} isSelected={selectedTab === tab.value} select={() => selectTab(tab.value)} />

app/components/syntax/Fence.tsx

@@ -1,9 +1,17 @@
+import { prismThemes } from "@/data/themes/prism";
 import { Highlight } from "prism-react-renderer";
-import { Fragment } from "react";
+import { useTheme } from "@/hooks/useTheme";
+import { Fragment, useMemo } from "react";
 
 export function Fence({ children, language }: { children: string; language: string }) {
+  const { theme } = useTheme();
+
+  const prismTheme = useMemo(() => {
+    return prismThemes[theme];
+  }, [theme]);
+
   return (
-    <Highlight code={children.trimEnd()} language={language} theme={{ plain: {}, styles: [] }}>
+    <Highlight code={children.trimEnd()} language={language} theme={prismTheme}>
       {({ className, style, tokens, getTokenProps }) => (
         <pre className={className} style={style}>
           <code>

app/data/themes/prism.ts

@@ -0,0 +1,8 @@
+import { PrismTheme } from "prism-react-renderer";
+import { Theme } from "@/contexts/ThemeContext";
+import { themes } from "prism-react-renderer";
+
+export const prismThemes: Record<Theme, PrismTheme> = {
+  dark: themes.oneDark,
+  light: themes.oneLight,
+};

app/lib/navigation.ts

@@ -8,6 +8,8 @@ export const navigation = [
       { title: "Premier composant", href: "/docs/react/premier-composant" },
       { title: "State et cycle de vie", href: "/docs/react/state-et-cycle-de-vie" },
       { title: "Hooks", href: "/docs/react/hooks" },
+      { title: "Le hook useContext", href: "/docs/react/usecontext" },
+      { title: "Le hook useReducer", href: "/docs/react/usereducer" },
     ],
   },
   {