Zoeken...  ⌘K GitHub

TextCode text

TextCode component.

/text-code
src/components/text/TextCode.astro
---
// TextCode, recovered from blurr-components.pages.dev
---

<div class="tx-code"> <div class="tx-code__header"> <span class="tx-code__lang">javascript</span> <span class="tx-code__label">ROI berekening</span> </div> <pre class="tx-code__pre"><code class="tx-code__code">const roi = (revenue - adSpend) / adSpend * 100;</code></pre> </div>

<style>
.tx-code{border-radius:.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:.6rem 1rem;background:#f5f5f5;border-bottom:1px solid #e0e0e0}
.tx-code__lang{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent)}
.tx-code__label{font-size:.72rem;color:#888}
.tx-code__pre{margin:0;padding:1.25rem;background:#0a0a0a;overflow-x:auto}
.tx-code__code{font-size:.85rem;line-height:1.65;color:#e2e8f0;white-space:pre}
</style>