add json upload button and add page reload button to server and player pages
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m29s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m29s
This commit is contained in:
parent
63e4eedc37
commit
1e96ed1b1c
17
src/app/common/hastebin.ts
Normal file
17
src/app/common/hastebin.ts
Normal file
@ -0,0 +1,17 @@
|
||||
const HASTE_URL: string = "https://haste.fascinated.cc";
|
||||
|
||||
/**
|
||||
* Creates a new haste with the given content.
|
||||
*
|
||||
* @param content the content to create the haste with
|
||||
* @returns the URL of the created haste
|
||||
*/
|
||||
export async function createHaste(content: string): Promise<string> {
|
||||
const response = await fetch(`${HASTE_URL}/documents`, {
|
||||
method: "POST",
|
||||
body: content,
|
||||
});
|
||||
|
||||
const { key } = await response.json();
|
||||
return `${HASTE_URL}/${key}`;
|
||||
}
|
@ -1,6 +1,15 @@
|
||||
import { ReactElement } from "react";
|
||||
import { CodeHighlighter } from "./code-highlighter";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "./ui/dialog";
|
||||
import { CreateHasteButton } from "@/app/components/create-haste-button";
|
||||
|
||||
type CodeDialogProps = {
|
||||
/**
|
||||
@ -28,12 +37,15 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>{children}</DialogTrigger>
|
||||
<DialogContent className="max-h-screen md:max-h-[700px] text-sm">
|
||||
<DialogContent className="max-h-screen md:max-h-[700px] min-w-screen md:min-w-fit text-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<CodeHighlighter code={code} />
|
||||
<DialogFooter>
|
||||
<CreateHasteButton content={code} />
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
21
src/app/components/create-haste-button.tsx
Normal file
21
src/app/components/create-haste-button.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { ReactElement } from "react";
|
||||
import { Button } from "@/app/components/ui/button";
|
||||
import { CreateHasteButtonProps } from "@/app/types/create-haste-button";
|
||||
import { createHaste } from "@/app/common/hastebin";
|
||||
|
||||
export function CreateHasteButton({ content }: CreateHasteButtonProps): ReactElement {
|
||||
/**
|
||||
* Uploads the content to Haste and opens the URL in a new tab.
|
||||
*/
|
||||
async function upload(): Promise<void> {
|
||||
const url = await createHaste(content);
|
||||
console.log(url);
|
||||
|
||||
// Open the URL in a new tab.
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
|
||||
return <Button onClick={() => upload()}>Create Haste</Button>;
|
||||
}
|
@ -8,6 +8,7 @@ import { Separator } from "../ui/separator";
|
||||
import { SkinPartImage } from "./skin-part-image";
|
||||
import { CacheInformation } from "@/app/components/cache-information";
|
||||
import { PlayerSkin } from "@/app/components/player/player-skin";
|
||||
import { ReloadPageButton } from "@/app/components/reload-page-button";
|
||||
|
||||
type PlayerViewProps = {
|
||||
/**
|
||||
@ -38,6 +39,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex gap-2 flex-wrap justify-center">
|
||||
<ReloadPageButton />
|
||||
<CodeDialog
|
||||
title="Player Data"
|
||||
description="The player's data from the API"
|
||||
|
28
src/app/components/reload-page-button.tsx
Normal file
28
src/app/components/reload-page-button.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { ReactElement } from "react";
|
||||
import { Button } from "@/app/components/ui/button";
|
||||
import { ArrowPathIcon } from "@heroicons/react/16/solid";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
|
||||
|
||||
export function ReloadPageButton(): ReactElement {
|
||||
/**
|
||||
* Reload the page.
|
||||
*/
|
||||
function reload(): void {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button onClick={() => reload()}>
|
||||
<ArrowPathIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Reload the page</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
@ -4,6 +4,7 @@ import { ReactElement } from "react";
|
||||
import { CodeDialog } from "../code-dialog";
|
||||
import { Button } from "../ui/button";
|
||||
import { CacheInformation } from "@/app/components/cache-information";
|
||||
import { ReloadPageButton } from "@/app/components/reload-page-button";
|
||||
|
||||
type ServerViewProps = {
|
||||
/**
|
||||
@ -30,6 +31,7 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 flex-wrap justify-center">
|
||||
<ReloadPageButton />
|
||||
<CodeDialog
|
||||
title="Server Data"
|
||||
description="The servers's data from the API"
|
||||
|
6
src/app/types/create-haste-button.ts
Normal file
6
src/app/types/create-haste-button.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export type CreateHasteButtonProps = {
|
||||
/**
|
||||
* The content to create the haste with.
|
||||
*/
|
||||
content: string;
|
||||
};
|
Loading…
Reference in New Issue
Block a user