add cache info buttons

src/app/(pages)/mojang/status/page.tsx

@@ -11,7 +11,7 @@ import { Colors } from "@/common/colors";
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
  */
-export const dynamic = "force-dynamic";
+export const revalidate = 0;
 
 /**
  * Gets the color of the status

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

@@ -12,6 +12,11 @@ import { CachedPlayer, getPlayer, McUtilsAPIError } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
 
+/**
+ * Force the page to be dynamic, so it will be regenerated on every request
+ */
+export const revalidate = 0;
+
 type Params = {
   params: {
     id: string;

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -19,6 +19,11 @@ import {
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
 
+/**
+ * Force the page to be dynamic, so it will be regenerated on every request
+ */
+export const revalidate = 0;
+
 type Params = {
   params: {
     platform: ServerPlatform;

src/app/components/cache-information.tsx

@@ -0,0 +1,24 @@
+import { Cache } from "mcutils-library";
+import React, { ReactElement, ReactNode } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/app/components/ui/popover";
+import moment from "moment";
+
+type CacheInformationProps = {
+  cache: Cache;
+  children?: ReactNode;
+};
+
+export function CacheInformation({ cache, children }: CacheInformationProps): ReactElement {
+  const isCached = cache.cached;
+  const cacheTime = cache.cachedTime;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent>
+        <p className={isCached ? "text-green-400" : "text-red-400"}>{isCached ? "Cached" : "Not Cached"}</p>
+        {cacheTime !== -1 && <p>{moment(cacheTime).calendar()}</p>}
+      </PopoverContent>
+    </Popover>
+  );
+}

src/app/components/player/player-view.tsx

@@ -6,6 +6,7 @@ import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import { SkinPartImage } from "./skin-part-image";
+import { CacheInformation } from "@/app/components/cache-information";
 
 type PlayerViewProps = {
   /**
@@ -44,7 +45,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
           </div>
         </div>
       </Card>
-      <div className="8xl:top-0 xs:bottom-0">
+      <div className="flex gap-2">
         <CodeDialog
           title="Player Data"
           description="The player's data from the API"
@@ -52,6 +53,9 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
         >
           <Button>View as JSON</Button>
         </CodeDialog>
+        <CacheInformation cache={player.cache}>
+          <Button>Cache Information</Button>
+        </CacheInformation>
       </div>
     </div>
   );

src/app/components/server/server-view.tsx

@@ -7,6 +7,8 @@ import { Button } from "../ui/button";
 import config from "@root/config.json";
 import { cn } from "@/common/utils";
 import { minecraft } from "@/app/font/fonts";
+import { CacheInformation } from "@/app/components/cache-information";
+import { Cache } from "mcutils-library";
 
 type ServerViewProps = {
   /**
@@ -55,14 +57,17 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
           </div>
         </div>
       </Card>
-      <div className="8xl:top-0 xs:bottom-0">
+      <div className="flex gap-2">
         <CodeDialog
           title="Server Data"
-          description="The server's data from the API"
+          description="The servers's data from the API"
           code={JSON.stringify(server, undefined, 2)}
         >
           <Button>View as JSON</Button>
         </CodeDialog>
+        <CacheInformation cache={server.cache}>
+          <Button>Cache Information</Button>
+        </CacheInformation>
       </div>
     </div>
   );

src/app/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/common/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }