From 672d8ef74cd9bfc199a7bb8572e7159ebc65993b Mon Sep 17 00:00:00 2001
From: mineshopdev <mineshop47@gmail.com>
Date: Tue, 17 Sep 2024 16:22:35 +0200
Subject: [PATCH] Removed CodeBlock component

---
 app/DocsComponents/CodeBlock.tsx            | 79 --------------------
 content/docs/Components/Sections/navbar.mdx | 81 ++++++++++-----------
 2 files changed, 37 insertions(+), 123 deletions(-)
 delete mode 100644 app/DocsComponents/CodeBlock.tsx

diff --git a/app/DocsComponents/CodeBlock.tsx b/app/DocsComponents/CodeBlock.tsx
deleted file mode 100644
index b56adba..0000000
--- a/app/DocsComponents/CodeBlock.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { Copy, Check } from 'lucide-react'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
-
-interface CodeBlockProps {
-  code: string
-  fileName: string
-  fileExtension: string
-  className?: string
-}
-
-export default function CodeBlock({
-  code,
-  fileName = 'file',
-  fileExtension = 'tsx',
-  className,
-}: CodeBlockProps) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    })
-  }
-
-  // Create a custom style by modifying vscDarkPlus
-  const customStyle = {
-    ...vscDarkPlus,
-    'pre[class*="language-"]': {
-      ...vscDarkPlus['pre[class*="language-"]'],
-      background: '#1e1e1e',
-      padding: '16px',
-      margin: 0,
-    },
-    'code[class*="language-"]': {
-      ...vscDarkPlus['code[class*="language-"]'],
-      background: 'none',
-      textShadow: 'none',
-    },
-  }
-
-  return (
-    <div className={`bg-[#1e1e1e] text-foreground rounded-md w-full max-w-3xl ${className}`}>
-      <div className="flex justify-between items-center px-4 py-2 bg-[#252526] rounded-t-md">
-        <div className="flex items-center space-x-2">
-          <span className="flex items-center space-x-1 text-gray-300">
-            <span className="bg-[#007acc] text-white text-xs font-bold px-2 py-1 rounded-xl">
-              {fileExtension.toUpperCase()}
-            </span>
-            <div className='p-1'>
-              <span><code>{fileName}.{fileExtension}</code></span>
-            </div>
-          </span>
-        </div>
-        <button className="text-gray-400 hover:text-white" onClick={handleCopy}>
-          {copied ? <Check size={18} /> : <Copy size={18} />}
-        </button>
-      </div>
-
-      <div className="bg-[#1e1e1e] rounded-b-md overflow-hidden">
-        <SyntaxHighlighter
-          language={fileExtension}
-          style={customStyle}
-          customStyle={{
-            borderRadius: '0 0 8px 8px',
-          }}
-          showLineNumbers={false}
-          wrapLines={true}
-        >
-          {code}
-        </SyntaxHighlighter>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/content/docs/Components/Sections/navbar.mdx b/content/docs/Components/Sections/navbar.mdx
index 696e867..9fb2f60 100644
--- a/content/docs/Components/Sections/navbar.mdx
+++ b/content/docs/Components/Sections/navbar.mdx
@@ -4,7 +4,6 @@ title: Navbar
 
 import StyledContainer from '../../../../app/Components/StyledContainer';
 import Navbar from '../../../../app/Components/Sections/Navbar';
-import CodeBlock from '../../../../app/DocsComponents/CodeBlock';
 
 ## Component
 
@@ -148,67 +147,61 @@ export default function Navbar() {
 </StyledContainer>
 
 ### For Dark - Light Mode
+`ThemeContext.tsx`:
 
-<CodeBlock 
-    fileName='ThemeContext'
-    fileExtension='tsx'
-    code={`'use client';
-    
+```tsx
+'use client';
+  
 import React, { createContext, useContext, useState, useEffect } from 'react';
 
 type Theme = 'light' | 'dark';
 
 interface ThemeContextType {
-  theme: Theme;
-  toggleTheme: () => void;
+theme: Theme;
+toggleTheme: () => void;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme, setTheme] = useState<Theme>('dark');
+const [theme, setTheme] = useState<Theme>('dark');
 
-  useEffect(() => {
-    const savedTheme = localStorage.getItem('theme') as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-    }
-  }, []);
+useEffect(() => {
+  const savedTheme = localStorage.getItem('theme') as Theme | null;
+  if (savedTheme) {
+    setTheme(savedTheme);
+  }
+}, []);
 
-  useEffect(() => {
-    document.documentElement.classList.toggle('dark', theme === 'dark');
-    localStorage.setItem('theme', theme);
-  }, [theme]);
+useEffect(() => {
+  document.documentElement.classList.toggle('dark', theme === 'dark');
+  localStorage.setItem('theme', theme);
+}, [theme]);
 
-  const toggleTheme = () => {
-    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
-  };
+const toggleTheme = () => {
+  setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
+};
 
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
+return (
+  <ThemeContext.Provider value={{ theme, toggleTheme }}>
+    {children}
+  </ThemeContext.Provider>
+);
 };
 
 export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};`}
-></CodeBlock>
-
-
-
-<CodeBlock  fileName='layout'
-    fileExtension='tsx'
-    className='mt-11'
-    code={`import ThemeProviders from 'your-path-to-ThemeContext'
+const context = useContext(ThemeContext);
+if (context === undefined) {
+  throw new Error('useTheme must be used within a ThemeProvider');
+}
+return context;
+};
+```
+`layout.tsx`:
 
+```tsx
 export default function Layout({ children }: { children: ReactNode }) {
-   return (
+  return (
     <html lang="en" className={inter.className}>
       <body>
         <ThemeProvider>
@@ -217,8 +210,8 @@ export default function Layout({ children }: { children: ReactNode }) {
       </body>
     </html>
   );
-}`}>
-</CodeBlock>
+}
+```
 
 ### Usage Methods