40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
|
|
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
|
|
|
|
import { copyToClipboard } from '$lib/utils'
|
|
|
|
import { faClipboard } from '@fortawesome/free-solid-svg-icons'
|
|
import { Highlight } from 'svelte-highlight'
|
|
import json from 'svelte-highlight/languages/json'
|
|
import { Button } from '../../common'
|
|
import type { App } from '../types'
|
|
|
|
let jsonViewerDrawer: Drawer
|
|
|
|
let app: App | undefined = undefined
|
|
|
|
export function open(app_l: App) {
|
|
app = app_l
|
|
jsonViewerDrawer?.toggleDrawer()
|
|
}
|
|
</script>
|
|
|
|
<Drawer bind:this={jsonViewerDrawer} size="800px">
|
|
<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
|
|
<div class="relative">
|
|
<Button
|
|
on:click={() => copyToClipboard(JSON.stringify(app, null, 4))}
|
|
color="dark"
|
|
variant="border"
|
|
size="sm"
|
|
startIcon={{ icon: faClipboard }}
|
|
btnClasses="absolute top-2 right-2 w-min"
|
|
>
|
|
Copy content
|
|
</Button>
|
|
<Highlight language={json} code={JSON.stringify(app ?? {}, null, 4)} />
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|