change when the action menu buttons are shown

src/app/(pages)/[id]/page.tsx

@@ -1,10 +1,12 @@
-import { cache, ReactElement } from "react";
+import React, { cache, ReactElement } from "react";
 import { ActionMenu } from "@/app/components/action-menu";
 import { Metadata } from "next";
 import moment from "moment";
 import { notFound } from "next/navigation";
 import { CodeBlock } from "@/app/components/code-block";
 import { detectLanguage } from "@/app/common/lang-detection/detection";
+import { Button } from "@/app/components/ui/button";
+import Link from "next/link";
 
 type PasteProps = {
   params: {
@@ -59,13 +61,10 @@ export async function generateMetadata({
       description: "Not found",
     };
   }
-  const created = moment(data.created)
-    .format("MMMM Do YYYY, h:mm:ss a")
-    .toString();
 
   return {
     title: `Paste - ${id}.${data.language}`,
-    description: `Created: ${created}\n\nClick to view the paste.`,
+    description: `Click to view the paste.`,
   };
 }
 
@@ -84,9 +83,11 @@ export default async function Paste({
 
   return (
     <div className="relative h-full">
-      <div className="absolute top-0 right-0 flex flex-col items-end mx-3 mt-2">
+      <ActionMenu>
-        <ActionMenu />
+        <Link href={"/"}>
-      </div>
+          <Button>New</Button>
+        </Link>
+      </ActionMenu>
 
       <div className="absolute right-0 bottom-0 text-right p-1.5">
         <p>{data.language}</p>

src/app/(pages)/page.tsx

@@ -60,18 +60,16 @@ export default function Home(): ReactElement {
         />
       </div>
 
-      <div className="absolute top-0 right-0 mx-3 mt-2 ">
+      <ActionMenu>
-        <ActionMenu>
+        <Button onClick={() => createPaste()} className="flex gap-1">
-          <Button onClick={() => createPaste()} className="flex gap-1">
+          {creating && (
-            {creating && (
+            <div className="animate-spin">
-              <div className="animate-spin">
+              <ArrowPathIcon width={16} height={16} />
-                <ArrowPathIcon width={16} height={16} />
+            </div>
-              </div>
+          )}
-            )}
+          Save
-            Save
+        </Button>
-          </Button>
+      </ActionMenu>
-        </ActionMenu>
-      </div>
     </div>
   );
 }

src/app/components/action-menu.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { Button } from "@/app/components/ui/button";
-import Link from "next/link";
 
 type ActionMenuProps = {
   children?: React.ReactNode;
@@ -8,11 +6,10 @@ type ActionMenuProps = {
 
 export function ActionMenu({ children }: ActionMenuProps) {
   return (
-    <div className="flex items-center bg-secondary rounded-md p-2 gap-2">
+    <div className="absolute top-0 right-0 flex flex-col items-end mx-3 mt-2">
-      {children}
+      <div className="flex items-center bg-secondary rounded-md p-2 gap-2">
-      <Link href={"/"}>
+        {children}
-        <Button>New</Button>
+      </div>
-      </Link>
     </div>
   );
 }

src/app/components/code-block.tsx

@@ -20,7 +20,7 @@ export function CodeBlock({ code, language }: CodeBlockProps): ReactElement {
     <SyntaxHighlighter
       className="!bg-transparent text-xs"
       style={atomOneDark}
-      language={language}
+      language={language == "text" ? "plaintext" : language}
       showLineNumbers
       codeTagProps={{
         style: {