mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
89 lines
1.8 KiB
Svelte
89 lines
1.8 KiB
Svelte
<script>
|
|
export let code = "";
|
|
export let codeRaw = "";
|
|
export let src = "";
|
|
export let framed = false;
|
|
|
|
import copy from "clipboard-copy";
|
|
import { CodeSnippet, Button } from "carbon-components-svelte";
|
|
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
|
|
import { url } from "@sveltech/routify";
|
|
import { theme } from "../store";
|
|
|
|
$: themedSrcUrl = $url(`${src}?theme=${$theme}`);
|
|
</script>
|
|
|
|
<div class="preview">
|
|
{#if framed}
|
|
<div class="framed-header">
|
|
<div
|
|
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
|
|
>
|
|
Content loaded in an iframe
|
|
</div>
|
|
<Button
|
|
style="margin-left: auto;"
|
|
kind="ghost"
|
|
target="_blank"
|
|
size="field"
|
|
href="{themedSrcUrl}"
|
|
icon="{Launch}"
|
|
>
|
|
Open in new tab
|
|
</Button>
|
|
</div>
|
|
{/if}
|
|
<div class="preview-viewer" class:framed>
|
|
{#if framed}
|
|
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
|
|
{:else}
|
|
<slot />
|
|
{/if}
|
|
</div>
|
|
<div class="code-override">
|
|
<CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
|
|
{@html code}
|
|
</CodeSnippet>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.preview {
|
|
margin-bottom: var(--cds-layout-04);
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
max-width: 66rem;
|
|
}
|
|
|
|
.code-override {
|
|
border: 1px solid #262626;
|
|
}
|
|
|
|
.preview-viewer {
|
|
border: 1px solid var(--cds-ui-03);
|
|
border-bottom: 0;
|
|
position: relative;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.preview-viewer:not(.framed) {
|
|
padding: var(--cds-spacing-06) var(--cds-spacing-05);
|
|
}
|
|
|
|
.preview-viewer.framed {
|
|
min-height: 20rem;
|
|
}
|
|
|
|
.framed-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|