Redesign code blocks

Author: JackTench

src/components/libresplit/AppMarkdownCodeBlock.tsx

@@ -1,25 +1,28 @@
+import { Card, CardContent } from "../ui/card";
 import { CodeBlock } from "react-code-block";
 
 export type AppMarkdownCodeBlockProps = {
   code: string;
   language?: string;
-  className?: string;
 };
 
 export function AppMarkdownCodeBlock({
   code,
   language,
-  className,
 }: AppMarkdownCodeBlockProps) {
   return (
-    <div className={className}>
-      <CodeBlock code={code} language={language ?? "text"}>
-        <CodeBlock.Code>
-          <CodeBlock.LineContent>
-            <CodeBlock.Token />
-          </CodeBlock.LineContent>
-        </CodeBlock.Code>
-      </CodeBlock>
+    <div className="w-fit px-2">
+      <Card className="w-fit">
+        <CardContent className="w-fit">
+          <CodeBlock code={code} language={language ?? "text"}>
+            <CodeBlock.Code>
+              <CodeBlock.LineContent>
+                <CodeBlock.Token />
+              </CodeBlock.LineContent>
+            </CodeBlock.Code>
+          </CodeBlock>
+        </CardContent>
+      </Card>
     </div>
   );
 }