<script lang="ts">
let { code, language = '' }: { code: string; language?: string } = $props();
let copied = $state(false);
function copy() {
navigator.clipboard.writeText(code);
copied = true;
setTimeout(() => (copied = false), 2000);
}
</script>
<div class="code-block">
<div class="code-header">
{#if language}<span class="lang">{language}</span>{/if}
<button class="copy-btn" onclick={copy} aria-label="Copy code">{copied ? '\u2713' : '\u2398'}</button>
</div>
<pre><code>{code}</code></pre>
</div>
<style>
.code-block {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 4px;
margin: 0.5em 0;
overflow: hidden;
}
.code-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.25rem 0.6rem;
border-bottom: 1px solid var(--border);
font-size: 0.7rem;
}
.lang {
color: var(--fg-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.copy-btn {
background: none;
border: none;
color: var(--fg-dim);
cursor: pointer;
padding: 0.15rem 0.3rem;
font-size: 0.85rem;
border-radius: 3px;
font-family: inherit;
}
.copy-btn:hover {
color: var(--fg);
background: var(--bg-surface);
}
pre {
margin: 0;
padding: 0.75rem;
overflow-x: auto;
font-family: inherit;
font-size: 0.85rem;
tab-size: 4;
}
code {
font-family: inherit;
}
</style>