fix: code modal black font

fezcode · fezcode · commit 485af62c5046 · 2025-10-30T16:59:33.000+03:00
diff --git a/src/components/CodeModal.js b/src/components/CodeModal.js
@@ -4,7 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { customTheme } from '../utils/customTheme';
 
-const CodeModal = ({ isOpen, onClose, children }) => {
+const CodeModal = ({ isOpen, onClose, children, language }) => {
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = 'hidden';
@@ -27,7 +27,7 @@ const CodeModal = ({ isOpen, onClose, children }) => {
           exit={{ opacity: 0 }}
         >
           <motion.div
-            className="relative bg-gray-800 rounded-lg shadow-lg p-6 w-3/4 h-3/4"
+            className="relative bg-gray-800 rounded-lg shadow-lg p-6 w-3/4 h-3/4 prose prose-xl prose-dark max-w-none"
             onClick={(e) => e.stopPropagation()}
             initial={{ scale: 0.8, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
@@ -42,7 +42,7 @@ const CodeModal = ({ isOpen, onClose, children }) => {
             </button>
             <SyntaxHighlighter
               style={customTheme}
-              language="jsx"
+              language={language}
               PreTag="pre"
               className="overflow-auto h-full"
               codeTagProps={{
diff --git a/src/pages/BlogPostPage.js b/src/pages/BlogPostPage.js
@@ -86,7 +86,7 @@ const CodeBlock = ({
     <div className="relative">
       <div className="absolute top-2 right-2 flex gap-2">
         <button
-          onClick={() => openModal(String(children).replace(/\n$/, ''))}
+          onClick={() => openModal(String(children).replace(/\n$/, ''), match[1])}
           className="text-white bg-gray-700 p-1 rounded opacity-75 hover:opacity-100"
         >
           <ArrowsOutSimple size={20} />
@@ -126,9 +126,11 @@ const BlogPostPage = () => {
   const contentRef = useRef(null);
   const [isModalOpen, setIsModalToOpen] = useState(false);
   const [modalContent, setModalContent] = useState('');
+  const [modalLanguage, setModalLanguage] = useState('jsx'); // Default to jsx
 
-  const openModal = (content) => {
+  const openModal = (content, language) => {
     setModalContent(content);
+    setModalLanguage(language);
     setIsModalToOpen(true);
   };
 
@@ -352,7 +354,7 @@ const BlogPostPage = () => {
           </div>
         </div>
       </div>
-      <CodeModal isOpen={isModalOpen} onClose={closeModal}>
+      <CodeModal isOpen={isModalOpen} onClose={closeModal} language={modalLanguage}>
         {modalContent}
       </CodeModal>
     </div>
