docs(playground): use CodeSandbox cloud sandboxes (#8576)

admin/new.docusaurus.io/functionUtils/playgroundUtils.ts

@@ -10,11 +10,8 @@ import type {HandlerEvent, HandlerResponse} from '@netlify/functions';
 const CookieName = 'DocusaurusPlaygroundName';
 
 const PlaygroundConfigs = {
-  // Do not use this one, see
-  // https://github.com/codesandbox/codesandbox-client/issues/5683#issuecomment-1023252459
-  // codesandbox: 'https://codesandbox.io/s/docusaurus',
   codesandbox:
-    'https://codesandbox.io/s/github/facebook/docusaurus/tree/main/examples/classic',
+    'https://codesandbox.io/p/sandbox/github/facebook/docusaurus/tree/main/examples/classic?file=%2FREADME.md',
 
   // Not updated
   // stackblitz: 'https://stackblitz.com/fork/docusaurus',

website/src/components/Playground/index.tsx

@@ -21,8 +21,9 @@ const Playgrounds = [
     url: 'https://docusaurus.new/codesandbox',
     description: (
       <Translate id="playground.codesandbox.description">
-        CodeSandbox is a popular playground solution. Runs Docusaurus in a
+        CodeSandbox is an online code editor and development environment that
-        remote Docker container.
+        allows developers to create, share and collaborate on web development
+        projects in a browser-based environment
       </Translate>
     ),
   },