Загрузка...

Стилизованное окно редактора кода с нумерацией строк. UI-компонент на Tailwind для отображения кода с подсветкой синтаксиса. Идеально для документации и портфолио.
<div class="relative w-full mr-auto mb-4 ml-auto max-w-xl">
<div class="absolute inset-0 translate-y-2 scale-[0.98] rounded-lg bg-neutral-900/50 ring-1 ring-white/5 blur-[0.3px]"></div>
<div class="relative ring-1 ring-white/10 overflow-hidden rounded-lg">
<div class="flex items-center justify-between px-3 py-2 border-b border-white/5 bg-neutral-950/50">
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-red-500/60"></span>
<span class="h-2 w-2 rounded-full bg-amber-500/60"></span>
<span class="h-2 w-2 rounded-full bg-emerald-500/60"></span>
</div>
<div class="flex items-center gap-2 rounded-full border border-white/10 bg-neutral-900/60 px-2 py-1 text-xs text-neutral-300">
<svg class="w-3 h-3 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" class=""></path>
</svg>
<span class="text-neutral-400/80 font-sans">agents…</span>
</div>
</div>
<div class="relative h-32">
<div class="absolute inset-0 grid grid-cols-[30px_1fr]">
<div class="select-none border-r border-white/5 bg-neutral-950/30 px-2 py-2 text-[11px] leading-4 text-neutral-400/50">
<div class="font-sans">1</div><div class="font-sans">2</div><div class="font-sans">3</div><div class="font-sans">4</div><div class="font-sans">5</div><div class="font-sans">6</div><div class="font-sans">7</div><div class="font-sans">8</div>
</div>
<pre class="overflow-hidden text-[11px] leading-4 text-neutral-300 mt-0 mr-0 mb-0 ml-0 pt-2 pr-3 pb-2 pl-3"><span class="text-blue-300 font-sans">class</span> <span class="text-white font-sans">OrchestratorAgent</span>:
<span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">__init__</span>(<span class="text-emerald-300 font-sans">self</span>, tools, memory):
<span class="text-emerald-300 font-sans">self</span>.tools = tools
<span class="text-emerald-300 font-sans">self</span>.memory = memory
<span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">plan</span>(<span class="text-emerald-300 font-sans">self</span>, goal):
steps = []
<span class="text-blue-300 font-sans">for</span> tool <span class="text-blue-300 font-sans">in</span> <span class="text-emerald-300 font-sans">self</span>.tools:</pre>
</div>
<div class="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-neutral-500/5 to-transparent"></div>
</div>
</div>
</div>