Add codeblocks to docs (filename is slightly broken)

Author: DylanBPY

app/docs/content/about/docs-page-example.tsx

@@ -1,4 +1,25 @@
-import { Heading, SubHeading, Text } from "@/components/docs_elements";
+import { Code, Heading, SubHeading, Text } from "@/components/docs_elements";
+
+const codeExample = `
+import com.qualcomm.robotcore.eventloop.opmode.LinearOpMode;
+import com.qualcomm.robotcore.eventloop.opmode.TeleOp;
+import io.github.javabee.Robot;
+
+@TeleOp(name="Example OpMode")
+public class ExampleOpMode extends LinearOpMode {
+    private Robot robot;
+
+    @Override
+    public void runOpMode() throws InterruptedException {
+        robot = new Robot(this);
+
+        telemetry.addLine("Initialized!");
+        waitForStart();
+        while (opModeIsActive()) {
+            robot.update();
+        }
+    }
+}`;
 
 export default function DocsPageExample() {
     return (
@@ -10,20 +31,26 @@ export default function DocsPageExample() {
                 Praesent orci ipsum, tristique quis erat ut, porta fringilla felis. Suspendisse turpis nisi, maximus a 
                 semper at, efficitur vel orci.
             </Text>
-            <Heading>Use a Heading for big ideas</Heading>
+
+            <Heading>This is a Heading</Heading>
             <Text>
                 Suspendisse consequat orci eu tincidunt pulvinar. Quisque vel libero arcu. Donec arcu metus, eleifend non 
                 tincidunt nec, molestie at purus. Nam porttitor est vitae elit varius tincidunt. Aenean tristique nisi at 
                 sollicitudin ultrices. Sed nisl quam, accumsan vel leo vitae, ullamcorper bibendum ipsum. Interdum et 
                 malesuada fames ac ante ipsum primis in faucibus. Integer eget accumsan ipsum. Praesent vel nulla lacus. In 
                 mollis ipsum nec diam faucibus aliquet.
             </Text>
-            <SubHeading>Use a Subheading for smaller sections</SubHeading>
+
+            <SubHeading>This is a SubHeading</SubHeading>
             <Text>
                 Curabitur a nunc ac nisl efficitur efficitur. Donec eget ligula sed enim efficitur convallis. Donec
                 convallis, enim in efficitur efficitur, ipsum nisl efficitur nunc, nec efficitur nunc nisl nec nisi.
                 Donec convallis, enim in efficitur efficitur, ipsum nisl efficitur nunc, nec efficitur nunc nisl nec nisi.
             </Text>
+
+            <Heading>Codeblocks</Heading>
+            <Text>Here is some code for something:</Text>
+            <Code code={codeExample} language="java" filename="ExampleOpMode.java" />
         </div>
     );
 }

app/docs/content/about/getting-started.tsx

@@ -2,7 +2,6 @@ import { Heading, SubHeading, Text, List } from "@/components/docs_elements";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { CodeXml, Hammer, BookOpenText } from "lucide-react";
-import { Separator } from "@/components/ui/separator";
 
 const suitePartsListContent = [
   {

components/docs_elements.tsx

@@ -3,6 +3,16 @@
  * These components help maintain consistent styling across the documentation pages.
  */
 
+// For using Java syntax highlighting in code blocks
+import Prism from "prismjs";
+import "prismjs/components/prism-java";
+import { CodeBlock } from 'react-code-block';
+import { themes } from 'prism-react-renderer';
+import { useCopyToClipboard } from 'react-use';
+import { Button } from "@/components/ui/button";
+
+import { useTheme } from "next-themes";
+
 /**
  * Heading component for main section titles. Uses an h2 tag internally.
  * @param children The content to be displayed inside the heading.
@@ -67,4 +77,41 @@ function List({ordered, content}: ListProps) {
     );
 }
 
-export { Heading, SubHeading, Text, List };
+interface CodeProps {
+    code: string;
+    language: string;
+    filename: string;
+}
+
+function Code({ code, language, filename }: CodeProps) {
+    const { theme } = useTheme();
+    const [state, copyToClipboard] = useCopyToClipboard();
+
+    const copyCode = () => {
+        // Logic to copy `code`
+        copyToClipboard(code);
+    };
+
+    return (
+        <div className="relative">
+            <CodeBlock code={code} language={language} prism={Prism} theme={theme === 'dark' ? themes.vsDark : themes.vsLight}>
+                {/* Filename */}
+                <div className="text-sm text-gray-400 px-6 py-4">{filename}</div>
+                <CodeBlock.Code className="bg-card p-4 rounded-lg shadow-lg ring-1 ring-foreground/10">
+                    <div className="table-row">
+                        <CodeBlock.LineNumber className="table-cell pr-5 text-sm text-gray-500 text-right select-none" />
+                        <CodeBlock.LineContent className="table-cell">
+                            <CodeBlock.Token />
+                        </CodeBlock.LineContent>
+                    </div>
+                </CodeBlock.Code>
+
+                <Button className="absolute top-2 right-2 text-sm font-semibold" onClick={copyCode}>
+                    {state.value ? 'Copied!' : 'Copy code'}
+                </Button>
+            </CodeBlock>
+        </div>
+    );
+}
+
+export { Heading, SubHeading, Text, List, Code };