Files
pockethost/packages/dashboard/src/components/CodeSample.svelte
2023-10-11 12:16:41 -07:00

39 lines
830 B
Svelte

<script lang="ts">
import CopyButton from '$components/CopyButton.svelte'
import { LoggerService } from '@pockethost/common'
import { Highlight } from 'svelte-highlight'
import { typescript, type LanguageType } from 'svelte-highlight/languages'
const { dbg } = LoggerService()
export let code: string
export let language: LanguageType<'typescript' | 'bash'> = typescript
const handleCopy = () => {
dbg('copied')
}
</script>
<div class="copy-container">
<Highlight {language} {code} />
<div class="copy-button">
<CopyButton {code} copy={handleCopy} />
</div>
</div>
<style lang="scss">
.copy-container {
position: relative;
margin: 5px;
border-radius: 16px;
overflow: hidden;
.copy-button {
position: absolute;
top: 8px;
right: 8px;
}
}
</style>