change when the action menu buttons are shown

This commit is contained in:
Lee 2024-04-24 17:35:25 +01:00
parent e9f63a369d
commit b5f4b39feb
4 changed files with 24 additions and 28 deletions

@ -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 />
</div>
<ActionMenu>
<Link href={"/"}>
<Button>New</Button>
</Link>
</ActionMenu>
<div className="absolute right-0 bottom-0 text-right p-1.5">
<p>{data.language}</p>

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

@ -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">
{children}
<Link href={"/"}>
<Button>New</Button>
</Link>
<div className="absolute top-0 right-0 flex flex-col items-end mx-3 mt-2">
<div className="flex items-center bg-secondary rounded-md p-2 gap-2">
{children}
</div>
</div>
);
}

@ -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: {