feat(suspensive.org): add Sandpack component (#963)

# Overview
<!--
    A clear and concise description of what this pr is about.
 -->
related #867
closed #7

I have set up the documentation to easily add examples in MDX using
Sandpack from CodeSandbox.

I have also carried over the theme selected in the [related
PR](#867). If there's anything
else that needs to be configured, please let me know!

## Usage

````mdx
import { Sandpack } from '@/components'

<Sandpack  
  customSetup={{
    dependencies: {
      '@suspensive/react': 'latest',
      '@suspensive/react-query': 'latest',
      '@tanstack/react-query': '^4.0.0',
    },
  }}
>

```js /App.tsx
import Example from './Example'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}
```

```js /Example.tsx active
import { wrap } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
import { api } from './api'

export default wrap
  .ErrorBoundaryGroup({ blockOutside: false })
  .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
  .Suspense({ fallback: <>loading...</>, clientOnly: true })
  .on(() => {
    const query = useSuspenseQuery({
      queryKey: ['key'],
      queryFn: () => api.text(),
    })
    return <>{query.data.text}</>
  })
```

```js /api.ts
export const api = {
  text: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return { text: 'Hello, Suspensive!' }
  },
}
```

</Sandpack>

````


### Result


https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8


## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

.changeset/thick-foxes-attend.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/suspensive.org": patch
+---
+
+feat(suspensive.org): add Sandpack Component

docs/suspensive.org/next.config.js

@@ -3,6 +3,10 @@ const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.tsx',
   defaultShowCopyCode: true,
+  mdxOptions: {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    remarkPlugins: [require('remark-sandpack').remarkSandpack],
+  },
 })
 
 /** @type {import('next').NextConfig} */

docs/suspensive.org/package.json

@@ -23,11 +23,14 @@
     "start": "next start -p 4000"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "^2.14.4",
+    "@codesandbox/sandpack-themes": "^2.0.21",
     "next": "^14.2.3",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "remark-sandpack": "^0.0.3"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.3",

docs/suspensive.org/src/components/Sandpack/index.tsx

@@ -0,0 +1,19 @@
+import { Sandpack as SandpackReact } from '@codesandbox/sandpack-react'
+import { atomDark } from '@codesandbox/sandpack-themes'
+import type { ComponentProps } from 'react'
+
+export const Sandpack = (props: Omit<ComponentProps<typeof SandpackReact>, 'template'>) => {
+  return (
+    <SandpackReact
+      template="vite-react-ts"
+      theme={atomDark}
+      {...props}
+      options={{
+        showLineNumbers: true,
+        showTabs: true,
+        showRefreshButton: true,
+        ...props.options,
+      }}
+    />
+  )
+}

docs/suspensive.org/src/components/index.ts

@@ -1,2 +1,3 @@
 export { Callout } from './Callout'
 export { HomePage } from './HomePage'
+export { Sandpack } from './Sandpack'