53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<div class=" w-full mt-6 mb-6">
|
|
<iframe
|
|
v-if="url"
|
|
:src="url"
|
|
:title
|
|
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
|
class="w-full h-full min-h-[600px] overflow-hidden rounded-md"
|
|
/>
|
|
<USkeleton
|
|
v-else
|
|
class="w-full min-h-[600px] rounded-md"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const {
|
|
provider,
|
|
id,
|
|
repo,
|
|
branch = 'main',
|
|
dir = '',
|
|
file,
|
|
title = 'Playground'
|
|
} = defineProps<{
|
|
provider: 'stackblitz' | 'codesandbox'
|
|
id?: string
|
|
repo?: string
|
|
branch?: string
|
|
dir?: string
|
|
file: string
|
|
title?: string
|
|
}>()
|
|
|
|
const url = ref('')
|
|
const colorMode = useColorMode()
|
|
|
|
onMounted(() => {
|
|
if (provider === 'stackblitz') {
|
|
if (repo)
|
|
url.value = `https://stackblitz.com/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}&theme=${colorMode.value}`
|
|
else if (id)
|
|
url.value = `https://stackblitz.com/edit/${id}?embed=1&file=${file}&theme=${colorMode.value}`
|
|
} else if (provider === 'codesandbox') {
|
|
if (repo)
|
|
url.value = `https://codesandbox.io/p/sandbox/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}`
|
|
else if (id)
|
|
url.value = `https://codesandbox.io/embed/${id}?view=editor+%2B+preview&module=${file}`
|
|
}
|
|
})
|
|
</script>
|