Spaces:
Running
Running
File size: 1,693 Bytes
8cc084b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <script lang="ts">
import Button from '$lib/components/ui/button/button.svelte';
import { Check, Copy } from '@lucide/svelte';
import { HighlightAuto } from 'svelte-highlight';
import { mode } from 'mode-watcher';
import githubDarkUrl from 'svelte-highlight/styles/github-dark.css?url';
import githubUrl from 'svelte-highlight/styles/github.css?url';
let { lang, text }: { lang?: string; text: string } = $props();
let copiedCode = $state(false);
async function copy(text: string) {
await navigator.clipboard.writeText(text);
copiedCode = true;
setTimeout(() => (copiedCode = false), 2000);
}
$effect(() => {
const themeUrl = mode.current === 'dark' ? githubDarkUrl : githubUrl;
let link = document.getElementById('highlight-theme') as HTMLLinkElement | null;
if (!link) {
link = document.createElement('link');
link.id = 'highlight-theme';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
link.href = themeUrl;
});
</script>
<div class="my-2 overflow-hidden rounded-md border border-border/50 bg-muted/40">
{#if lang}
<div
class="flex items-center justify-between border-b border-border/50 bg-muted/60 px-2.5 py-1 dark:bg-accent/20"
>
<span class="font-mono text-[10px] text-muted-foreground">{lang}</span>
</div>
{/if}
<div class="group relative">
<HighlightAuto code={text} class="font-mono text-[11px] leading-relaxed" />
<Button
variant="outline"
class="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100"
size="icon-xs"
onclick={() => copy(text)}
>
{#if copiedCode}
<Check class="size-3 text-green-500" />
{:else}
<Copy class="size-3" />
{/if}
</Button>
</div>
</div>
|