TextCode text

---
interface Props {
  language?: string;
  code: string;
  label?: string;
}
const { language = "javascript", code = `// BLURR conversie tracker
const trackConversion = (event, value) => {
  gtag('event', event, {
    currency: 'EUR',
    value: value,
    send_to: 'AW-XXXXXXX/YYYYY'
  });
};`, label = "Voorbeeld: conversion tracking" } = Astro.props;
---

<div class="tx-code">
  <div class="tx-code__header">
    <span class="tx-code__lang">{language}</span>
    {label && <span class="tx-code__label">{label}</span>}
  </div>
  <pre class="tx-code__pre"><code class="tx-code__code">{code}</code></pre>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .tx-code {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  }
  .tx-code__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
  }
  .tx-code__lang {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
  }
  .tx-code__label {
    font-size: 0.72rem;
    color: #888;
  }
  .tx-code__pre {
    margin: 0;
    padding: 1.25rem;
    background: #0a0a0a;
    overflow-x: auto;
  }
  .tx-code__code {
    font-size: 0.85rem;
    line-height: 1.65;
    color: #e2e8f0;
    white-space: pre;
  }
</style>