docs(www): fix mdx reset on package manager tab switch

apps/www/components/code-block-command.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { CheckIcon, ClipboardIcon } from "lucide-react"
 
 import { NpmCommands } from "@/types/unist"
-import { useConfig } from "@/hooks/use-config"
+import { useConfigPackageManager } from "@/hooks/use-config-package-manager"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
 import { Tabs } from "@/registry/default/ui/tabs"
 import { Button } from "@/registry/new-york/ui/button"
@@ -16,7 +16,7 @@ export function CodeBlockCommand({
   __pnpmCommand__,
   __bunCommand__,
 }: React.ComponentProps<"pre"> & NpmCommands) {
-  const [config, setConfig] = useConfig()
+  const [configPackageManager, setConfigPackageManager] = useConfigPackageManager()
   const [hasCopied, setHasCopied] = React.useState(false)
 
   React.useEffect(() => {
@@ -26,7 +26,7 @@ export function CodeBlockCommand({
     }
   }, [hasCopied])
 
-  const packageManager = config.packageManager || "pnpm"
+  const packageManager = configPackageManager || "pnpm"
   const tabs = React.useMemo(() => {
     return {
       pnpm: __pnpmCommand__,
@@ -58,10 +58,7 @@ export function CodeBlockCommand({
       <Tabs
         defaultValue={packageManager}
         onValueChange={(value) => {
-          setConfig({
-            ...config,
-            packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
-          })
+          setConfigPackageManager(value as "pnpm" | "npm" | "yarn" | "bun")
         }}
       >
         <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900 px-3 pt-2.5">

apps/www/hooks/use-config-package-manager.ts

@@ -0,0 +1,10 @@
+import { useAtom } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+
+type ConfigPackageManager = "npm" | "yarn" | "pnpm" | "bun"
+
+const configAtom = atomWithStorage<ConfigPackageManager>("config-package-manager", "pnpm")
+
+export function useConfigPackageManager() {
+  return useAtom(configAtom)
+}

apps/www/hooks/use-config.ts

@@ -8,14 +8,12 @@ type Config = {
   style: Style["name"]
   theme: BaseColor["name"]
   radius: number
-  packageManager: "npm" | "yarn" | "pnpm" | "bun"
 }
 
 const configAtom = atomWithStorage<Config>("config", {
   style: "new-york",
   theme: "zinc",
   radius: 0.5,
-  packageManager: "pnpm",
 })
 
 export function useConfig() {