add language indicator to the code highlighter

sentry.server.config.ts

@@ -15,5 +15,4 @@ Sentry.init({
 
   // uncomment the line below to enable Spotlight (https://spotlightjs.com)
   // spotlight: process.env.NODE_ENV === 'development',
-  
 });

src/app/(pages)/docs/[[...slug]]/page.tsx

@@ -13,7 +13,6 @@ import {
 import { capitalizeFirstLetter } from "@/app/common/string-utils";
 import { notFound } from "next/navigation";
 import { GithubLink } from "@/app/components/docs/github-link";
-import { CommandMenu } from "@/app/components/command-menu";
 
 type DocumentationPageParams = {
   params: {

src/app/components/code-highlighter.tsx

@@ -2,6 +2,8 @@ import { ReactElement } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import createElement from "react-syntax-highlighter/dist/esm/create-element";
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { cn } from "@/app/common/utils";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
 
 type CodeHighlighterProps = {
   /**
@@ -69,18 +71,18 @@ function rowRenderer({
 
 export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
   return (
-    <div className="text-xs md:text-md">
+    <div className="text-xs md:text-md relative">
+      {/* Language */}
+      <div className="absolute top-0 right-0 p-1 bg-muted rounded-bl-md rounded-tr-md">
+        <span className="text-xs text-muted-foreground">{capitalizeFirstLetter(language)}</span>
+      </div>
+
       <SyntaxHighlighter
+        className={cn("max-h-[600px] !bg-secondary break-all rounded-md", rounded && "rounded-md")}
         language={language}
         style={atomOneDark}
         wrapLongLines
         renderer={rowRenderer}
-        customStyle={{
-          maxHeight: "600px",
-          backgroundColor: "hsl(var(--secondary))",
-          wordBreak: "break-all",
-          borderRadius: rounded ? "0.25rem" : undefined,
-        }}
       >
         {code}
       </SyntaxHighlighter>

src/app/components/copy-button.tsx

@@ -10,6 +10,11 @@ type CopyButtonProps = {
    */
   content: string;
 
+  /**
+   * The message to display when the content is copied.
+   */
+  message?: string | boolean;
+
   /**
    * The children for this element.
    */
@@ -22,7 +27,7 @@ type CopyButtonProps = {
  * @param props the properties for the button
  * @returns the copy button
  */
-export function CopyButton({ content, children }: CopyButtonProps): ReactElement {
+export function CopyButton({ content, message, children }: CopyButtonProps): ReactElement {
   const { toast } = useToast();
 
   return (
@@ -33,7 +38,7 @@ export function CopyButton({ content, children }: CopyButtonProps): ReactElement
           title: "Copied!",
           description: (
             <p>
-              Copied <b>{content}</b> to your clipboard.
+              Copied <b>{!message ? content : message}</b> to your clipboard.
             </p>
           ),
           duration: 5000,

src/app/components/navbar.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement } from "react";
 import { HrefButton } from "./href-button";
 import Logo from "./logo";
 import { ToggleThemeButton } from "./theme-toggle-button";