From ede3dbbe7a8bca445d69dcb56e17f604e632548a Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Fri, 11 Apr 2025 18:30:24 +0200
Subject: [PATCH] feat: Add prismThemes to Fence component

---
 app/components/md/Tabs.tsx      |  2 +-
 app/components/syntax/Fence.tsx | 12 ++++++++++--
 app/data/themes/prism.ts        |  8 ++++++++
 app/lib/navigation.ts           |  2 ++
 4 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 app/data/themes/prism.ts

diff --git a/app/components/md/Tabs.tsx b/app/components/md/Tabs.tsx
index 5f55811..07f0894 100644
--- a/app/components/md/Tabs.tsx
+++ b/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)} />
diff --git a/app/components/syntax/Fence.tsx b/app/components/syntax/Fence.tsx
index 2b7b912..61a4b38 100644
--- a/app/components/syntax/Fence.tsx
+++ b/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>
diff --git a/app/data/themes/prism.ts b/app/data/themes/prism.ts
new file mode 100644
index 0000000..cc8750f
--- /dev/null
+++ b/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,
+};
diff --git a/app/lib/navigation.ts b/app/lib/navigation.ts
index 5b38f5c..07a86bd 100644
--- a/app/lib/navigation.ts
+++ b/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" },
     ],
   },
   {