Files
Frontend/src/app/(pages)/page.tsx
Liam 428a95c54d
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m4s
cleanup and docs
2024-04-18 07:06:16 +01:00

92 lines
2.4 KiB
TypeScript

import { Stats } from "@/app/components/stats";
import Link from "next/link";
import { ReactElement } from "react";
import { Button } from "../components/ui/button";
import { Separator } from "../components/ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
type Button = {
/**
* The title of the button.
*/
title: string;
/**
* The tooltip to display for this statistic.
*/
tooltip: string;
/**
* The URL to go to.
*/
url: string;
/**
* Whether clicking the button will
* open the link in a new tab.
*/
openInNewTab?: boolean;
};
const buttons: Button[] = [
{
title: "Get Started",
tooltip: "Click to view the Postman Collection",
url: "https://www.postman.com/imfascinated/workspace/minecraft-utilities",
openInNewTab: true,
},
{
title: "Documentation",
tooltip: "Click to open the documentation",
url: "https://api.mcutils.xyz/swagger-ui.html",
openInNewTab: true,
},
];
export default function Home(): ReactElement {
return (
<div className="text-center flex flex-col gap-4">
<div className="p-4">
<div>
<h1 className="text-4xl mb-2">Minecraft Utilities</h1>
<div className="text-lg">
<p>
Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
</p>
<p>We offer you a simple and easy to use API.</p>
</div>
</div>
<div className="flex flex-row gap-2 justify-center mt-4">
{buttons.map((button, index) => {
return (
<Tooltip key={index}>
<TooltipTrigger asChild>
<Button key={index}>
<Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
<p>{button.title}</p>
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{button.tooltip}</p>
</TooltipContent>
</Tooltip>
);
})}
</div>
</div>
<Separator />
<div className="flex flex-col gap-4 items-center pt-4">
<div className="text-center">
<p className="font-semibold text-xl">API Statistics</p>
<p>View the statistics for the API in real-time!</p>
</div>
<Stats />
</div>
</div>
);
}