refactor: website facelift (#10823)

apps/website/src/components/PackageSelect.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { Select, SelectList, SelectOption, SelectTrigger } from '@/components/ui/Select';
+import { PACKAGES } from '@/util/constants';
+
+export function PackageSelect() {
+	const router = useRouter();
+	const params = useParams();
+
+	return (
+		<Select aria-label="Select a package" defaultSelectedKey={params.packageName as string}>
+			<SelectTrigger className="bg-[#f3f3f4] dark:bg-[#121214]" />
+			<SelectList classNames={{ popover: 'bg-[#f3f3f4] dark:bg-[#28282d]' }} items={PACKAGES}>
+				{(item) => (
+					<SelectOption
+						className="dark:pressed:bg-[#313135] bg-[#f3f3f4] dark:bg-[#28282d] dark:hover:bg-[#313135]"
+						href={`/docs/packages/${item.name}/stable`}
+						id={item.name}
+						key={item.name}
+						onHoverStart={() => router.prefetch(`/docs/packages/${item.name}/stable`)}
+						textValue={item.name}
+					>
+						{item.name}
+					</SelectOption>
+				)}
+			</SelectList>
+		</Select>
+	);
+}