feat: continue to work on site

src/app/components/Code.module.css

@@ -16,6 +16,71 @@
   font-size: 0.8rem;
 }
 
-.snippetContent {
-  padding: 0.5rem 1rem;
+.snippetContent>pre {
+  overflow: auto;
+  padding: 1rem;
+  scrollbar-color: #043160 #0b3766;
+}
+
+.snippetContent>pre::-webkit-scrollbar {
+  background-color: #0b3766;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.snippetContent>pre::-webkit-scrollbar-thumb {
+  background-color: #043160;
+  border-radius: 10px;
+}
+
+@-moz-document url-prefix() {
+  .snippetContent>pre {
+    margin-right: 1rem;
+  }
+}
+
+.copyButtonContainer {
+  position: relative;
+}
+
+.copyButton {
+  background-color: #194488;
+  border: none;
+  color: white;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.copyButton:hover {
+  color: #ee7203;
+}
+
+.tooltip {
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -175%);
+  white-space: nowrap;
+  background-color: #0b3766;
+  padding: 0.5rem;
+  z-index: 100;
+  box-shadow: 0 0 2px 0.2px #05254a;
+  border-radius: 0.25rem;
+  width: 100px;
+  text-align: center;
+}
+
+.tooltip::before {
+  content: "";
+  position: absolute;
+  border: 0.5rem solid transparent;
+  border-top: 0.5rem solid #0b3766;
+  top: 100%;
+  left: 2.55rem;
+}
+
+.tooltipHidden {
+  display: none;
 }

src/app/components/Code.tsx

@@ -1,22 +1,63 @@
+'use client';
+
+import { MouseEvent, useState } from 'react';
 import styles from './Code.module.css';
 
 function CodeCopyButton() {
+  const [copyButtonTooltip, setCopyButtonTooltip] =
+    useState<boolean>(false);
+
+  const [showTooltip, setShowTooltip] =
+    useState<boolean>(false);
+
+  const handleCopy = (e: MouseEvent<HTMLButtonElement>) => {
+    setCopyButtonTooltip(true);
+    setTimeout(() => {
+      setCopyButtonTooltip(false);
+    }, 1000);
+
+    const target = e.currentTarget;
+    const code =
+      target.parentElement?.parentElement?.parentElement?.querySelector(
+        'pre'
+      )?.innerText ?? '';
+
+    navigator.clipboard.writeText(code);
+  };
+
   return (
-    <button>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        className="bi bi-clipboard-fill"
-        viewBox="0 0 16 16"
+    <div className={styles.copyButtonContainer}>
+      <div>
+        <div
+          className={
+            showTooltip
+              ? styles.tooltip
+              : styles.tooltipHidden
+          }
+        >
+          {copyButtonTooltip ? 'Copied!' : 'Click to Copy'}
+        </div>
+      </div>
+      <button
+        className={styles.copyButton}
+        onClick={handleCopy}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
       >
-        <path
-          fillRule="evenodd"
-          d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z"
-        />
-      </svg>
-    </button>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z"
+          />
+        </svg>
+      </button>
+    </div>
   );
 }
 
@@ -35,9 +76,9 @@ export default function Code({
         <div>{heading}</div>
         <CodeCopyButton />
       </div>
-      <pre className={styles.snippetContent}>
-        <code className={styles.code}>{children}</code>
-      </pre>
+      <div className={styles.snippetContent}>
+        {children}
+      </div>
     </div>
   );
 }

src/app/components/Section.module.css

@@ -3,8 +3,9 @@
   align-items: flex-start;
   width: 100%;
   gap: 2rem;
-  border-bottom: 1px solid #848586;
   padding: 5rem;
+  max-width: 1450px;
+
 }
 
 @media screen and (max-width: 1000px) {
@@ -12,16 +13,25 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
+    padding: 2.5rem;
     gap: 1rem;
   }
 }
 
 .container>article {
   flex: 1;
+  min-width: 0;
   width: 100%;
+  max-width: 600px;
 }
 
 .container>article>p {
   margin-top: 20px;
   color: #c1c9d2
+}
+
+.container>article>p>code {
+  background-color: #0b3766;
+  padding: 0.2rem 0.5rem;
+  border-radius: 5px;
 }