Ampandheaust
d34722d66d
Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
32 lines
839 B
Vue
32 lines
839 B
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
id: { type: String, required: true },
|
|
title: { type: String, required: true },
|
|
description: { type: String, default: "Run this recipe against the real Yawn worker." },
|
|
});
|
|
|
|
const query = computed(() => encodeURIComponent(props.id));
|
|
</script>
|
|
|
|
<template>
|
|
<section class="yawn-playground">
|
|
<div class="yawn-playground__header">
|
|
<div>
|
|
<span>LIVE PLAYGROUND</span>
|
|
<strong>{{ title }}</strong>
|
|
<p>{{ description }}</p>
|
|
</div>
|
|
<a :href="`/playground/?recipe=${query}`">Edit and run ↗</a>
|
|
</div>
|
|
<ClientOnly>
|
|
<iframe
|
|
:src="`/playground/runner.html?recipe=${query}&embed=1`"
|
|
:title="`${title} live preview`"
|
|
loading="lazy"
|
|
/>
|
|
</ClientOnly>
|
|
</section>
|
|
</template>
|