From 69db666a4bcdf4b5c563d0e2b667f15600fdba99 Mon Sep 17 00:00:00 2001
From: d3m0k1d <d3m0k1d1337@gmail.com>
Date: Sun, 15 Feb 2026 18:02:02 +0300
Subject: [PATCH] fix: types

---
 frontend/src/pages/BlogPost.tsx | 103 ++++++++++++--------------------
 1 file changed, 39 insertions(+), 64 deletions(-)

diff --git a/frontend/src/pages/BlogPost.tsx b/frontend/src/pages/BlogPost.tsx
index e914e85..2b90592 100644
--- a/frontend/src/pages/BlogPost.tsx
+++ b/frontend/src/pages/BlogPost.tsx
@@ -52,9 +52,7 @@ function BlogPost() {
   };
 
   const copyCode = useCallback((code: string) => {
-    navigator.clipboard.writeText(code).then(() => {
-      // Можно добавить toast позже
-    });
+    navigator.clipboard.writeText(code);
   }, []);
 
   if (isLoading) {
@@ -118,14 +116,15 @@ function BlogPost() {
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               components={{
-                code({ node, inline, className, children, ...props }) {
+                code(props) {
+                  const { children, className, ...rest } = props;
                   const match = /language-(\w+)/.exec(className || "");
                   const language = match ? match[1] : "text";
 
-                  if (inline) {
+                  if (!match) {
                     return (
-                      <code className="inline-code">
-                        {String(children).replace(/\n$/, "")}
+                      <code {...rest} className="inline-code">
+                        {children}
                       </code>
                     );
                   }
@@ -142,21 +141,17 @@ function BlogPost() {
                         <span>Copy</span>
                       </button>
                       <SyntaxHighlighter
-                        {...props}
-                        style={{
-                          ...theme,
-                          'pre[class*="language-"]': {
-                            ...theme['pre[class*="language-"]'],
-                            background: "rgb(15, 15, 25) !important",
-                            marginBottom: "0 !important",
-                            borderRadius: "0 0 12px 12px !important",
-                          },
-                        }}
+                        style={theme}
                         language={language}
                         PreTag="div"
-                        showLineNumbers
-                        wrapLines
-                        className="code-highlighter"
+                        customStyle={{
+                          background: "rgb(12, 12, 22)",
+                          margin: 0,
+                          padding: "1.75rem 1.5rem 1.5rem",
+                          borderRadius: "0 0 12px 12px",
+                          fontSize: "0.875rem",
+                          lineHeight: "1.65",
+                        }}
                       >
                         {String(children).replace(/\n$/, "")}
                       </SyntaxHighlighter>
@@ -198,6 +193,10 @@ function BlogPost() {
           padding-left: 1.5em;
         }
 
+        .blog-content li {
+          color: #ffffff !important;
+        }
+
         /* Inline код */
         .inline-code {
           color: #ffffff !important;
@@ -205,28 +204,28 @@ function BlogPost() {
           padding: 0.2em 0.4em !important;
           border-radius: 6px !important;
           font-size: 0.875em !important;
+          font-family: 'Commit_Mono', monospace !important;
         }
 
-        /* 🔥 КОНТЕЙНЕР КОДА */
+        /* Контейнер кода */
         .code-container {
           position: relative;
           margin: 2em 0;
           border-radius: 12px;
           overflow: hidden;
-          background: linear-gradient(145deg, rgb(10,10,20) 0%, rgb(20,20,35) 100%);
-          border: 1px solid rgba(255,255,255,0.08);
-          box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-          backdrop-filter: blur(20px);
+          background: linear-gradient(145deg, rgb(8,8,18) 0%, rgb(18,18,32) 100%);
+          border: 1px solid rgba(255,255,255,0.06);
+          box-shadow: 0 12px 40px rgba(0,0,0,0.5);
         }
 
-        /* ✨ АНИМИРОВАННАЯ КНОПКА COPY */
+        /* Анимированная кнопка */
         .copy-button {
           position: absolute;
           top: 14px;
           right: 14px;
           z-index: 20;
-          background: linear-gradient(135deg, rgba(117,43,255,0.2) 0%, rgba(117,43,255,0.1) 100%);
-          border: 1px solid rgba(117,43,255,0.4);
+          background: linear-gradient(135deg, rgba(117,43,255,0.25) 0%, rgba(117,43,255,0.15) 100%);
+          border: 1px solid rgba(117,43,255,0.5);
           color: #ffffff;
           padding: 8px 16px;
           border-radius: 8px;
@@ -236,53 +235,30 @@ function BlogPost() {
           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           font-family: 'Commit_Mono', monospace;
           backdrop-filter: blur(20px);
-          box-shadow: 0 4px 14px rgba(117,43,255,0.2);
-          transform: translateY(0);
+          box-shadow: 0 4px 16px rgba(117,43,255,0.25);
         }
 
         .copy-button:hover {
-          background: linear-gradient(135deg, hsl(270,73%,63%) 0%, hsl(270,73%,55%) 100%);
-          transform: translateY(-2px) scale(1.02);
-          box-shadow: 0 8px 25px rgba(117,43,255,0.4);
-          border-color: hsl(270,73%,70%);
+          background: linear-gradient(135deg, hsl(270,73%,65%) 0%, hsl(270,73%,55%) 100%);
+          transform: translateY(-3px) scale(1.03);
+          box-shadow: 0 12px 30px rgba(117,43,255,0.45);
+          border-color: hsl(270,73%,75%);
         }
 
         .copy-button:active {
-          transform: translateY(0) scale(0.98);
+          transform: translateY(-1px) scale(0.98);
           transition: all 0.1s;
         }
 
-        .copy-button span {
-          position: relative;
-        }
-
-        /* SyntaxHighlighter */
-        .code-highlighter {
-          margin: 0 !important;
-          border-radius: 0 0 12px 12px !important;
-          font-family: 'Commit_Mono', monospace !important;
-          font-size: 0.875rem !important;
-          line-height: 1.65 !important;
-        }
-
-        .code-highlighter pre[class*="language-"] {
-          margin: 0 !important;
-          padding: 1.75rem 1.5rem 1.5rem !important;
-          background: transparent !important;
-          border-radius: 0 0 12px 12px !important;
-          overflow-x: auto !important;
-        }
-
-        /* Номера строк */
-        .code-highlighter .token-line {
-          padding-left: 1.25rem !important;
-          counter-increment: line;
-          position: relative;
-        }
-
         /* Заголовки */
         .blog-content h1, .blog-content h2, .blog-content h3 {
           color: hsl(270, 73%, 63%) !important;
+          margin-top: 2em;
+          margin-bottom: 0.75em;
+        }
+
+        .blog-content a {
+          color: hsl(270, 73%, 63%) !important;
         }
 
         /* Responsive */
@@ -292,7 +268,6 @@ function BlogPost() {
             border-radius: 0;
             border-left: none;
             border-right: none;
-            box-shadow: none;
           }
           .copy-button {
             top: 10px;