feat(module): improve-styling-for-bash-code-snippets

src/components/Content.tsx

@@ -7,11 +7,15 @@ import {
   ContentContainer,
   NavigationButtons,
   NavigationButton,
+  CodeBlockContainer,
+  CopyButton,
 } from "../styles/components/Content";
 import {
   LoadingOutlined,
   LeftOutlined,
   RightOutlined,
+  CopyOutlined,
+  CheckOutlined,
 } from "@ant-design/icons";
 import { Spin } from "antd";
 import fetchContent from "../utils/fetchContent";
@@ -23,6 +27,7 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
   const [content, setContent] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -59,6 +64,12 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
     }
   };
 
+  const copyToClipboard = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopied(code);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
   if (loading) {
     return (
       <div
@@ -88,11 +99,20 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
         <ReactMarkdown
           rehypePlugins={[rehypeRaw, rehypeHighlight]}
           components={{
-            img: ({ ...props }) => (
-              <div className="image-container">
-                <img {...props} alt={props.alt || ""} />
-              </div>
-            ),
+            pre: ({ children }) => {
+              const codeElement = React.Children.toArray(children)[0] as React.ReactElement;
+              if (!codeElement || typeof codeElement !== "object") return <pre>{children}</pre>;
+
+              const codeText = codeElement.props.children || "";
+              return (
+                <CodeBlockContainer>
+                  <pre>{children}</pre>
+                  <CopyButton onClick={() => copyToClipboard(codeText)}>
+                    {copied === codeText ? <CheckOutlined /> : <CopyOutlined />}
+                  </CopyButton>
+                </CodeBlockContainer>
+              );
+            },
           }}
         >
           {content}

src/styles/components/Content.ts

@@ -1,48 +1,40 @@
 import styled from "styled-components";
 
 export const ContentContainer = styled.div`
-  padding: 20px;
-  max-width: 900px;
+  padding: 1.25rem;
+  max-width: 56.25rem;
   width: 100%;
   margin: 0 auto;
-  background-color: var(--bg-color) !important;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: var(--bg-color);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1, h2, h3, h4, h5, h6 {
     margin-top: 1em;
     margin-bottom: 0.5em;
-    color: var(--text-color) !important;
+    color: var(--text-color);
   }
 
   p {
     line-height: 1.6;
     margin-bottom: 1em;
-    color: var(--text-color) !important;
+    color: var(--text-color);
   }
 
   a {
     color: #19c6c7;
     text-decoration: none;
-
     &:hover {
       text-decoration: underline;
     }
   }
 
-  ul,
-  ol {
+  ul, ol {
     margin: 1em 0;
-
     li {
       margin-bottom: 0.5em;
-      color: var(--text-color) !important;
+      color: var(--text-color);
     }
   }
 
@@ -58,40 +50,76 @@ export const ContentContainer = styled.div`
     justify-content: center;
   }
 
-  @media (max-width: 1200px) {
+  pre {
+    background-color: #282c34;
+    color: white;
+    padding: 0.75rem;
+    border-radius: 0.3125rem;
+    overflow-x: auto;
+    font-size: 0.875rem;
+    margin: 0.625rem 0;
+  }
+
+  code {
+    font-family: "Fira Code", monospace;
+    white-space: pre-wrap;
+  }
+
+  @media (max-width: 75rem) {
     max-width: 90%;
   }
 
-  @media (max-width: 768px) {
-    padding: 15px;
+  @media (max-width: 48rem) {
+    padding: 0.9375rem;
+  }
+`;
+
+export const CodeBlockContainer = styled.div`
+  position: relative;
+  margin: 0.625rem 0;
+`;
+
+export const CopyButton = styled.button`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.625rem;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  cursor: pointer;
+  padding: 0.3125rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.4);
   }
 `;
 
 export const NavigationButtons = styled.div`
-  margin-top: 60px;
-  margin-bottom: 20px;
+  margin-top: 3.75rem;
+  margin-bottom: 1.25rem;
   display: flex;
   justify-content: space-between;
 
-  @media (max-width: 768px) {
+  @media (max-width: 48rem) {
     flex-direction: column;
     align-items: stretch;
-
     button {
-      margin-bottom: 10px;
+      margin-bottom: 0.625rem;
     }
   }
 `;
 
 export const NavigationButton = styled.button`
-  padding: 10px 20px;
-  border: 2px solid #19c6c7;
-  border-radius: 4px;
+  padding: 0.625rem 1.25rem;
+  border: 0.125rem solid #19c6c7;
+  border-radius: 0.25rem;
   background-color: white;
   color: #1b2540;
   cursor: pointer;
   font-weight: 600;
-  font-size: 16px;
+  font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -108,19 +136,4 @@ export const NavigationButton = styled.button`
     color: white;
     text-decoration: underline;
   }
-
-  svg {
-    margin-right: 8px;
-  }
-
-  &:nth-child(1) svg {
-    margin-right: 8px;
-  }
-
-  &:nth-child(2) {
-    svg {
-      margin-right: 0;
-      margin-left: 8px;
-    }
-  }
 `;