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

[ptvty]

This PR fixes #6101

The feature to switch package managers in code blocks was added in #6075

In that PR the package manager setting is added to an existing Jotai Atom which is causing the whole Mdx component to re-render and thus losing the active tab.

In this PR I used a separate Atom to fix this problem, so changing the package manager now causes a re-render in the code blocks only, keeping the tab state intact.

[vercel]

@ptvty is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Dec 18, 2024 9:51am

[elijahnikov]

Was about to take a look at fixing this but saw your opened issue.

Theres no need to create a new hook, you can use useAtomValue from jotai to get a read only value from storage in apps/www/hooks/use-config.ts

export function useConfigValue<K extends keyof Config>(key: K) {
  const selectedAtom = useMemo(
    () => selectAtom(configAtom, (config) => config[key]),
    [key]
  )
  return useAtomValue(selectedAtom)
}

and then in apps/www/components/mdx-components.tsx you can write it like so:

export function Mdx({ code }: MdxProps) {
  const style = useConfigValue("style")
  const Component = useMDXComponent(code, {
    style,
  })

  return (
    <div className="mdx">
      <Component components={components} />
    </div>
  )
}

[ptvty]

@elijahnikov I didn't want to touch other useConfig usages as there were plenty of them, but it seems that the only usage that is causing the re-render is the one in mdx-component.mdx.
Good job!