100 lines
2.6 KiB
TypeScript
100 lines
2.6 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";
|
|
import { Title } from "@/app/components/title";
|
|
|
|
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 get started!",
|
|
url: "/documentation",
|
|
},
|
|
{
|
|
title: "Postman Collection",
|
|
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-2">
|
|
<Title
|
|
title="Minecraft Utilities"
|
|
subtitle={
|
|
<>
|
|
<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 className="flex flex-row gap-2 justify-center mt-4 flex-wrap">
|
|
{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 p-2">
|
|
<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>
|
|
);
|
|
}
|