feat: add codesandbox

apps/www/.vitepress/theme/components/CodeSandbox.vue

@@ -3,26 +3,19 @@ import { onMounted, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 import { makeCodeSandboxParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { type Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string
+  code: string
+  style: Style
 }>()
 
 const sources = ref<Record<string, string>>({})
 
 onMounted(() => {
-  // props.files?.forEach((file) => {
+  sources.value['App.vue'] = props.code
-  //   if (file.endsWith('.vue')) {
-  //     import(`../components/demo/${props.name}/${file.replace('.vue', '')}.vue?raw`).then(
-  //       res => (sources.value[file] = res.default),
-  //     )
-  //   }
-  //   else if (file.endsWith('.js')) {
-  //     import(`../components/demo/${props.name}/${file.replace('.js', '')}.js?raw`).then(
-  //       res => (sources.value[file] = res.default),
-  //     )
-  //   }
-  // })
 })
 </script>
 
@@ -31,12 +24,12 @@ onMounted(() => {
     <input type="hidden" name="query" value="file=src/App.vue">
     <input type="hidden" name="environment" value="server">
     <input type="hidden" name="hidedevtools" value="1">
-    <input type="hidden" name="parameters" :value="makeCodeSandboxParams(name, sources)">
+    <input type="hidden" name="parameters" :value="makeCodeSandboxParams(name, style, sources)">
 
     <Tooltip :content="`Open ${name} in CodeSandbox`">
-      <button type="submit">
+      <Button :variant="'ghost'" :size="'icon'" type="submit">
         <Icon icon="ph-codesandbox-logo" />
-      </button>
+      </Button>
     </Tooltip>
   </form>
 </template>

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -2,6 +2,7 @@
 import StyleSwitcher from './StyleSwitcher.vue'
 import ComponentLoader from './ComponentLoader.vue'
 import Stackblitz from './Stackblitz.vue'
+import CodeSandbox from './CodeSandbox.vue'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
 import { useConfigStore } from '@/stores/config'
 import { cn } from '@/lib/utils'
@@ -40,7 +41,11 @@ const { style } = useConfigStore()
       <TabsContent value="preview" class="relative rounded-md border">
         <div class="flex items-center justify-between p-4">
           <StyleSwitcher />
+
+          <div class="flex items-center gap-x-1">
             <Stackblitz :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
+            <CodeSandbox :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
+          </div>
         </div>
         <div
           :class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {

apps/www/.vitepress/theme/components/Stackblitz.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 import { makeStackblitzParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import { type Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
@@ -25,9 +26,9 @@ function handleClick() {
 <template>
   <div>
     <Tooltip :content="`Open ${name} in Stackblitz`">
-      <button @click="handleClick">
+      <Button :variant="'ghost'" :size="'icon'" @click="handleClick">
         <Icon icon="simple-icons:stackblitz" />
-      </button>
+      </Button>
     </Tooltip>
   </div>
 </template>

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -119,26 +119,29 @@ watch(() => $route.path, (n) => {
             </div>
           </Button>
 
-          <div
+          <div class="flex items-center gap-x-1">
+            <Button
               v-for="link in links"
               :key="link.name"
-            class="flex items-center space-x-1"
+              as="a"
+              :href="link.href" target="_blank"
+              :variant="'ghost'" :size="'icon'"
             >
-            <a :href="link.href" target="_blank" class="text-foreground">
+              <component :is="link.icon" class="w-[20px] h-[20px]" />
-              <component :is="link.icon" class="w-5 h-5" />
+            </Button>
-            </a>
-          </div>
 
-          <button
+            <Button
               class="flex items-center justify-center"
               aria-label="Toggle dark mode"
-            @click="toggleDark()"
+              :variant="'ghost'"
+              :size="'icon'" @click="toggleDark()"
             >
               <component
                 :is="isDark ? RadixIconsSun : RadixIconsMoon"
-              class="w-5 h-5 text-foreground"
+                class="w-[20px] h-[20px] text-foreground"
               />
-          </button>
+            </Button>
+          </div>
         </div>
       </div>
     </header>

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -86,6 +86,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     'tailwindcss-animate': 'latest',
     [iconPackage]: 'latest',
     'shadcn-vue': 'latest',
+    'typescript': 'latest',
   }
 
   const devDependencies = {
@@ -119,8 +120,8 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
   const files = {
     'package.json': {
       content: {
-        name: `radix-vue-${componentName.toLowerCase().replace(/ /g, '-')}`,
+        name: `shadcn-vue-${componentName.toLowerCase().replace(/ /g, '-')}`,
-        scripts: { start: `npx shadcn-vue@latest add ${registryDependencies.join(' ')}  -y && vite` },
+        scripts: { start: `shadcn-vue add ${registryDependencies.join(' ')}  -y && vite` },
         dependencies,
         devDependencies,
       },
@@ -201,7 +202,7 @@ createApp(App).mount('#app')`,
 } 
 
 #app {
-  @apply w-full flex items-center justify-center;
+  @apply w-full flex items-center justify-center px-12;
 }`,
       isBinary: false,
     },