Загрузка...
Интерактивная таблица данных для визуализации архитектуры. Показывает деревья компонентов с метриками, типами и прогрессом. Идеально для инструментов разработчика и аналитики.
<div class="overflow-hidden shadow-cyan-900/5 group
hover:border-cyan-500/30 transition-colors duration-500
bg-zinc-950 border-white/10 border relative shadow-2xl">
<style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');</style>
<div class="absolute inset-0
bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)]
bg-[size:24px_24px] pointer-events-none"></div>
<div class="absolute top-0 left-0 w-2 h-2 border-t border-l border-cyan-500/50"></div>
<div class="absolute top-0 right-0 w-2 h-2 border-t border-r border-cyan-500/50"></div>
<div class="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-cyan-500/50"></div>
<div class="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-cyan-500/50"></div>
<div class="px-6 py-4 border-b border-white/5 bg-zinc-900/80 flex items-center justify-between relative z-10">
<div class="flex gap-1.5">
<div class="w-2 h-2 bg-zinc-700"></div>
<div class="w-2 h-2 bg-zinc-700"></div>
<div class="w-2 h-2 bg-zinc-700"></div>
</div>
<div class="text-[10px] font-mono text-cyan-500/70 tracking-wider">Generated_Layout_Tree.json</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-3 border-b border-white/5
bg-zinc-950/50 text-xs font-medium text-zinc-500 uppercase
tracking-wider relative z-10
font-['Inter','Helvetica_Neue',sans-serif]">
<div class="col-span-5 pl-2 font-medium">Component</div>
<div class="col-span-3 text-center font-medium">Type</div>
<div class="col-span-2 text-center font-medium">Nodes</div>
<div class="col-span-2 text-right font-medium">Size</div>
</div>
<div class="flex flex-col z-10 relative font-['Inter','Helvetica_Neue',sans-serif]">
<div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5
items-center hover:bg-white/[0.02] transition-colors
group/row">
<div class="col-span-5 flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-cyan-400">
<path fill="currentColor" fill-rule="evenodd" d="M1 20.24c0-.42.344-.76.767-.76h20.466c.423 0 .767.34.767.76s-.344.76-.767.76H1.767A.764.764 0 0 1 1 20.24" clip-rule="evenodd"></path>
<path fill="currentColor" d="M3.69 3.89c-.899.89-.899 2.324-.899 5.19v5.067c0 1.91 0 2.866.6 3.46c.599.593 1.564.593 3.493.593h10.233c1.93 0 2.894 0 3.493-.594c.6-.593.6-1.549.6-3.46V9.08c0-2.866 0-4.3-.9-5.19C19.412 3 17.965 3 15.07 3H8.93c-2.894 0-4.34 0-5.24.89" opacity=".5"></path>
</svg>
<span class="text-sm text-zinc-200 font-medium">Split Hero Section</span>
</div>
<div class="col-span-3 flex justify-center gap-1">
<span class="px-1.5 py-0.5 bg-cyan-950/50 border border-cyan-500/20 text-[10px] text-cyan-300 font-medium">Layout</span>
<span class="px-1.5 py-0.5 bg-blue-950/50 border border-blue-500/20 text-[10px] text-blue-300 font-medium">Flex</span>
</div>
<div class="col-span-2 flex items-center justify-center gap-2">
<span class="text-xs text-zinc-400 font-medium">12</span>
<div class="flex items-end gap-[1px] h-3">
<div class="w-0.5 h-1.5 bg-cyan-500"></div>
<div class="w-0.5 h-2.5 bg-cyan-500"></div>
<div class="w-0.5 h-3 bg-cyan-500"></div>
<div class="w-0.5 h-2 bg-cyan-500/30"></div>
</div>
</div>
<div class="col-span-2 flex items-center justify-end gap-2">
<div class="w-16 h-1 bg-zinc-800">
<div class="w-[85%] h-full bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.5)]"></div>
</div>
<span class="text-xs text-zinc-400 w-4 text-right font-medium">2k</span>
</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/5
items-center hover:bg-white/[0.02] transition-colors
group/row">
<div class="col-span-5 flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-blue-400">
<path fill="currentColor" d="M18.512 10.077c0 .738-.625 1.337-1.396 1.337s-1.395-.599-1.395-1.337c0-.739.625-1.338 1.395-1.338s1.396.599 1.396 1.338"></path>
<path fill="currentColor" fill-rule="evenodd" d="M18.036 5.532c-1.06-.137-2.414-.137-4.123-.136h-3.826c-1.71 0-3.064 0-4.123.136c-1.09.14-1.974.437-2.67 1.104S2.29 8.149 2.142 9.195C2 10.21 2 11.508 2 13.147v.1c0 1.64 0 2.937.142 3.953c.147 1.046.456 1.892 1.152 2.559s1.58.963 2.67 1.104c1.06.136 2.414.136 4.123.136h3.826c1.71 0 3.064 0 4.123-.136c1.09-.14 1.974-.437 2.67-1.104s1.005-1.514 1.152-2.559C22 16.184 22 14.886 22 13.248v-.1c0-1.64 0-2.937-.142-3.953c-.147-1.046-.456-1.892-1.152-2.559s-1.58-.963-2.67-1.104" clip-rule="evenodd"></path>
</svg>
<span class="text-sm text-zinc-200 font-medium">Bento Feature Grid</span>
</div>
<div class="col-span-3 flex justify-center gap-1">
<span class="px-1.5 py-0.5 bg-blue-950/50 border border-blue-500/20 text-[10px] text-blue-300 font-medium">Grid</span>
</div>
<div class="col-span-2 flex items-center justify-center gap-2">
<span class="text-xs text-zinc-400 font-medium">24</span>
<div class="flex items-end gap-[1px] h-3">
<div class="w-0.5 h-2 bg-blue-500"></div>
<div class="w-0.5 h-3 bg-blue-500"></div>
<div class="w-0.5 h-1.5 bg-blue-500/30"></div>
<div class="w-0.5 h-1 bg-blue-500/30"></div>
</div>
</div>
<div class="col-span-2 flex items-center justify-end gap-2">
<div class="w-16 h-1 bg-zinc-800">
<div class="w-[60%] h-full bg-blue-500"></div>
</div>
<span class="text-xs text-zinc-400 w-4 text-right font-medium">1.5</span>
</div>
</div>
<div class="grid grid-cols-12 gap-4 hover:bg-white/[0.02]
transition-colors group/row border-white/5 border-b pt-4
pr-6 pb-4 pl-6 gap-x-4 gap-y-4 items-center">
<div class="col-span-5 flex items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" class="text-sky-400">
<circle cx="15" cy="6" r="3" fill="currentColor" opacity=".4"></circle>
<ellipse cx="16" cy="17" fill="currentColor" opacity=".4" rx="5" ry="3"></ellipse>
<circle cx="9.001" cy="6" r="4" fill="currentColor"></circle>
<ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4"></ellipse>
</svg>
<span class="text-sm text-zinc-200 font-medium">Social Proof Carousel</span>
</div>
<div class="col-span-3 flex justify-center gap-1">
<span class="px-1.5 py-0.5 bg-sky-950/50 border border-sky-500/20 text-[10px] text-sky-300 font-medium">Loop</span>
</div>
<div class="col-span-2 flex items-center justify-center gap-2">
<span class="text-xs text-zinc-400 font-medium">8</span>
<div class="flex items-end gap-[1px] h-3">
<div class="w-0.5 h-1 bg-sky-500"></div>
<div class="w-0.5 h-3 bg-sky-500"></div>
<div class="w-0.5 h-3 bg-sky-500"></div>
<div class="w-0.5 h-2 bg-sky-500"></div>
</div>
</div>
<div class="col-span-2 flex items-center justify-end gap-2">
<div class="w-16 h-1 bg-zinc-800">
<div class="w-[40%] h-full bg-sky-500"></div>
</div>
<span class="text-xs text-zinc-400 w-4 text-right font-medium">1k</span>
</div>
</div>
</div>
</div>