diff --git a/apps/www/src/components/feat/navbar/menu-dropdown.tsx b/apps/www/src/components/feat/navbar/menu-dropdown.tsx
new file mode 100644
index 0000000..2f7d083
--- /dev/null
+++ b/apps/www/src/components/feat/navbar/menu-dropdown.tsx
@@ -0,0 +1,64 @@
+import {
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { SignedIn, SignedOut, useClerk } from "@clerk/nextjs";
+import { LogIn, Settings, Ship, User, UserCog } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export function MenuDropdown() {
+ const clerk = useClerk();
+ const router = useRouter();
+
+ return (
+ <>
+ Profile
+
+ clerk.openSignIn()}
+ className="flex items-center gap-2"
+ >
+
+ Login
+
+ clerk.openSignUp()}
+ className="flex items-center gap-2"
+ >
+
+ Sign up
+
+
+ router.push(process.env.NEXT_PUBLIC_CLERK_SWITCH_DOMAIN as string)
+ }
+ className="hover:block group hover:py-1"
+ >
+
+
+ Migrate your account
+
+
+ If you created your account before Jan. 29th 2025, you'll need to
+ migrate your account
+
+
+
+
+ clerk.openUserProfile()}>
+
+
+ User Settings
+
+
+
+ App
+
+
+
+ Settings
+
+
+
+ );
+}
diff --git a/apps/www/src/components/feat/navbar/navbar.tsx b/apps/www/src/components/feat/navbar/navbar.tsx
index 3b9536e..65c3a71 100644
--- a/apps/www/src/components/feat/navbar/navbar.tsx
+++ b/apps/www/src/components/feat/navbar/navbar.tsx
@@ -1,5 +1,6 @@
"use client";
import { BrandingGenericIcon } from "@/components/feat/icons/branding-icons";
+import { Button } from "@/components/ui/button";
import {
ContextMenu,
ContextMenuContent,
@@ -7,14 +8,19 @@ import {
ContextMenuSeparator,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
import Github from "@/components/ui/github";
import { ALegacy } from "@/components/util/link";
-import { ModeToggle } from "@/components/util/mode-toggle";
import { version } from "@/config/version";
import { useScroll } from "@/lib/hooks/use-scroll";
import { cn } from "@/lib/utils";
-import { ServerCrash } from "lucide-react";
+import { Menu, ServerCrash } from "lucide-react";
import Link from "next/link";
+import { MenuDropdown } from "./menu-dropdown";
export function NavBar() {
const showBorder = useScroll(40);
@@ -56,11 +62,31 @@ export function NavBar() {
+
+
+
+ Open GitHub Releases
+
+
+
-
-
+
+
+
+
+
+
+
+
+
);
diff --git a/apps/www/src/components/feat/server-list/server-card.tsx b/apps/www/src/components/feat/server-list/server-card.tsx
index 12d27d4..f4f33ca 100644
--- a/apps/www/src/components/feat/server-list/server-card.tsx
+++ b/apps/www/src/components/feat/server-list/server-card.tsx
@@ -1,14 +1,61 @@
import type { OnlineServer } from "@/lib/types/mh-server";
import IconDisplay from "../icons/minecraft-icon-display";
import { Material } from "@/components/ui/material";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
export default function ServerCard({ server }: { server: OnlineServer }) {
return (
- {server.name}
+ {server.name}
+
+
+
+ by {server.author || "Nobody"}
+
+
+
+
+ {server.author ? (
+
+ {server.name} is owned by{" "}
+
+
+ ) : (
+
+ This server doesn't have a recorded owner because the server owner
+ never linked their Minecraft account to their Minehut account.
+
+ )}
+
+
);
}
+
+function RankColoring({ rank, author }: { rank: string; author: string }) {
+ switch (rank.toLocaleLowerCase()) {
+ case "default":
+ return {author};
+ case "vip":
+ return [VIP] {author};
+ case "vip_plus":
+ return [VIP+] {author};
+ case "pro":
+ return [PRO] {author};
+ case "legend":
+ return [LEGEND] {author};
+ case "patron":
+ return [PATRON] {author};
+ case "mod":
+ return [MOD] {author};
+ default:
+ return [STAFF] {author};
+ }
+}
diff --git a/apps/www/src/components/feat/server-list/server-list.tsx b/apps/www/src/components/feat/server-list/server-list.tsx
index ea6aec7..7d80d80 100644
--- a/apps/www/src/components/feat/server-list/server-list.tsx
+++ b/apps/www/src/components/feat/server-list/server-list.tsx
@@ -4,9 +4,13 @@ import { useServers } from "@/lib/hooks/use-servers";
import ServerCard from "./server-card";
import { Separator } from "@/components/ui/separator";
import { Statistics } from "./statistics";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useInfiniteScrolling } from "@/lib/hooks/use-infinite-scrolling";
export function ServerList() {
const { servers, loading, serverCount, playerCount } = useServers();
+ const { itemsLength, fetchMoreData, hasMoreData, data } =
+ useInfiniteScrolling(servers);
if (loading)
return (
@@ -29,11 +33,18 @@ export function ServerList() {
Servers
-
- {servers.map((c) => (
-
- ))}
-
+ Loading...}
+ >
+
+ {data.map((c) => (
+
+ ))}
+
+
);
}
diff --git a/apps/www/src/components/ui/dropdown-menu.tsx b/apps/www/src/components/ui/dropdown-menu.tsx
index c522d38..251fe78 100644
--- a/apps/www/src/components/ui/dropdown-menu.tsx
+++ b/apps/www/src/components/ui/dropdown-menu.tsx
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
(({ className, ...props }, ref) => (
+ >
+ {props.children}
+
+
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
diff --git a/apps/www/src/lib/hooks/use-infinite-scrolling.tsx b/apps/www/src/lib/hooks/use-infinite-scrolling.tsx
index 0890ed7..c011bd8 100644
--- a/apps/www/src/lib/hooks/use-infinite-scrolling.tsx
+++ b/apps/www/src/lib/hooks/use-infinite-scrolling.tsx
@@ -1,7 +1,33 @@
-import { OnlineServer } from "../types/mh-server";
+import { useEffect, useState } from "react";
+import type { OnlineServer } from "../types/mh-server";
-export function useInfiniteScrolling({
- servers,
-}: {
- servers: OnlineServer[];
-}) {}
+const itemsPerScroll = 40;
+
+export function useInfiniteScrolling(servers: OnlineServer[]) {
+ const [currentOffset, setCurrentOffset] = useState(0);
+ const [data, setData] = useState([]);
+ const [hasMoreData, setHasMoreData] = useState(true);
+
+ useEffect(() => {
+ // Start at the first `itemsPerScroll` servers (duh)
+ setData(servers.slice(0, itemsPerScroll));
+ }, [servers]);
+
+ return {
+ itemsLength: currentOffset + itemsPerScroll,
+ fetchMoreData: () => {
+ setCurrentOffset(currentOffset + itemsPerScroll);
+ const currentData = data;
+ const dataSlice = servers.slice(
+ currentOffset,
+ currentOffset + itemsPerScroll
+ );
+ const newDataArray = [...currentData, ...dataSlice];
+
+ setData(newDataArray);
+ if (dataSlice.length !== itemsPerScroll) setHasMoreData(false);
+ },
+ hasMoreData,
+ data,
+ };
+}