72f9bd5ef5
* feat: generate code dynamically * chore: cleanup and transform path on component * feat: create config sheet * feat: code wrapper * fix: not acting immediately * chore: add key to vnode * chore: add vue-sonner to demos dependencies, add placeholder for codeConfigs * chore: fix wrong icons * chore: improve crawling logic --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com>
37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref, toRefs, watch } 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 { code } = toRefs(props)
|
|
const sources = ref<Record<string, string>>({})
|
|
|
|
watch(code, () => {
|
|
sources.value['App.vue'] = code.value
|
|
}, { immediate: true })
|
|
</script>
|
|
|
|
<template>
|
|
<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
|
|
<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, style, sources)">
|
|
|
|
<Tooltip :content="`Open ${name} in CodeSandbox`">
|
|
<Button :variant="'ghost'" :size="'icon'" type="submit">
|
|
<Icon icon="ph-codesandbox-logo" />
|
|
</Button>
|
|
</Tooltip>
|
|
</form>
|
|
</template>
|