feat: redirect to latest version, otherwise click select version button

packages/website/src/pages/docs/packages/index.tsx

@@ -8,8 +8,11 @@ import {
 	Stack,
 	Title,
 	useMantineColorScheme,
+	Button,
 } from '@mantine/core';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import type { MouseEvent } from 'react';
 import { VscArrowRight, VscPackage } from 'react-icons/vsc';
 import { PACKAGES } from '~/util/packages';
 
@@ -35,6 +38,17 @@ const useStyles = createStyles((theme) => ({
 export default function PackagesRoute() {
 	const { classes } = useStyles();
 	const { colorScheme } = useMantineColorScheme();
+	const router = useRouter();
+
+	const handleClick = async (ev: MouseEvent<HTMLDivElement>, packageName: string) => {
+		ev.stopPropagation();
+
+		const res = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName ?? 'builders'}`);
+		const data: string[] = await res.json();
+
+		const latestVersion = data.at(-2);
+		void router.push(`/docs/packages/${packageName}/${latestVersion}`);
+	};
 
 	return (
 		<Container className={classes.outer} size="xs">
@@ -43,9 +57,15 @@ export default function PackagesRoute() {
 					Select a package:
 				</Title>
 				{PACKAGES.map((pkg) => (
-					<Link key={pkg} href={`/docs/packages/${pkg}`} passHref prefetch={false}>
+					<UnstyledButton
-						<UnstyledButton className={classes.control} component="a">
+						component="div"
-							<Group position="apart">
+						key={pkg}
+						role="link"
+						className={classes.control}
+						onClick={(ev: MouseEvent<HTMLDivElement>) => void handleClick(ev, pkg)}
+					>
+						<Group position="apart">
+							<Group sx={{ flexGrow: 1 }} position="apart">
 								<Group>
 									<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
 										<VscPackage size={20} />
@@ -54,10 +74,20 @@ export default function PackagesRoute() {
 										{pkg}
 									</Text>
 								</Group>
-								<VscArrowRight size={20} />
+								<Link href={`/docs/packages/${pkg}`} passHref prefetch={false}>
+									<Button
+										component="a"
+										size="xs"
+										compact
+										onClick={(ev: MouseEvent<HTMLAnchorElement>) => ev.stopPropagation()}
+									>
+										Select version
+									</Button>
+								</Link>
 							</Group>
-						</UnstyledButton>
+							<VscArrowRight size={20} />
-					</Link>
+						</Group>
+					</UnstyledButton>
 				))}
 			</Stack>
 		</Container>