feat: begin adding copy function to code component

src/app/components/Code.module.css

@@ -0,0 +1,21 @@
+.snippetContainer {
+  border-radius: 10px;
+  background-color: #0b3766;
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.snippetHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #194488;
+  padding: 0.5rem 1rem;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+  font-size: 0.8rem;
+}
+
+.snippetContent {
+  padding: 0.5rem 1rem;
+}

src/app/components/Code.tsx

@@ -1,15 +1,43 @@
 import styles from './Code.module.css';
 
+function CodeCopyButton() {
+  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"
+      >
+        <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>
+  );
+}
+
 export default function Code({
   children,
   language,
+  heading,
 }: {
   children: string;
   language: string;
+  heading: string;
 }) {
   return (
-    <pre className={styles.pre}>
-      <code className={styles.code}>{children}</code>
-    </pre>
+    <div className={styles.snippetContainer}>
+      <div className={styles.snippetHeader}>
+        <div>{heading}</div>
+        <CodeCopyButton />
+      </div>
+      <pre className={styles.snippetContent}>
+        <code className={styles.code}>{children}</code>
+      </pre>
+    </div>
   );
 }

src/app/components/Section.module.css

@@ -1,8 +1,8 @@
 .container {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
-  gap: 1rem;
+  gap: 2rem;
   border-bottom: 1px solid #848586;
   padding: 5rem;
 }
@@ -12,11 +12,13 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
+    gap: 1rem;
   }
 }
 
 .container>article {
   flex: 1;
+  width: 100%;
 }
 
 .container>article>p {

src/app/components/SideBar.module.css

@@ -1,4 +1,5 @@
 .container {
+  position: sticky;
   display: flex;
   flex-direction: column;
   height: 100%;