83 lines
2.5 KiB
Text
83 lines
2.5 KiB
Text
|
---
|
||
|
|
interface Props {
|
||
|
|
code: string;
|
||
|
|
hints: string[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const { code, hints } = Astro.props;
|
||
|
|
|
||
|
|
const lines = code.split('\n');
|
||
|
|
---
|
||
|
|
|
||
|
|
<div class="bg-[#0d1117] border border-[#30363d] rounded-md overflow-hidden">
|
||
|
|
<div class="bg-[#161b22] px-4 py-3 border-b border-[#30363d] flex items-center gap-2">
|
||
|
|
<div class="flex gap-1.5">
|
||
|
|
<div class="w-3 h-3 rounded-full bg-[#ff5f57]"></div>
|
||
|
|
<div class="w-3 h-3 rounded-full bg-[#febc2e]"></div>
|
||
|
|
<div class="w-3 h-3 rounded-full bg-[#28c840]"></div>
|
||
|
|
</div>
|
||
|
|
<span class="ml-2 text-sm text-[#8b949e]">{Astro.url.pathname.split('/').pop() || 'file.js'}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="overflow-x-auto">
|
||
|
|
<table class="w-full font-mono text-sm">
|
||
|
|
<tbody>
|
||
|
|
{lines.map((line, index) => {
|
||
|
|
const lineNum = index + 1;
|
||
|
|
const hasHint = hints.some(h => h.includes(`Line ${lineNum}`));
|
||
|
|
const hintText = hints.find(h => h.includes(`Line ${lineNum}`));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<tr
|
||
|
|
class="group hover:bg-[#161b22] cursor-pointer transition-colors"
|
||
|
|
title={`Mark line ${lineNum} as buggy`}
|
||
|
|
>
|
||
|
|
<td class="w-16 text-right pr-4 select-none">
|
||
|
|
<span class={`text-[#8b949e] ${hasHint ? 'text-[#ff7b72] font-semibold' : ''}`}>
|
||
|
|
{lineNum}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-0.5 whitespace-pre">
|
||
|
|
<span class={`text-[#e6edf3] ${hasHint ? 'bg-[#ff7b7233] px-2 -mx-2' : ''}`}>
|
||
|
|
{line || ' '}
|
||
|
|
</span>
|
||
|
|
{hasHint && (
|
||
|
|
<span class="ml-2 text-[#79c0ff] text-xs opacity-0 group-hover:opacity-100 transition-opacity">
|
||
|
|
• {hintText?.replace(`Line ${lineNum}: `, '')}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{hints.length > 0 && (
|
||
|
|
<div class="bg-[#161b22] px-4 py-3 border-t border-[#30363d]">
|
||
|
|
<h3 class="text-sm font-semibold text-[#c9d1d9] mb-2">Hints:</h3>
|
||
|
|
<ul class="space-y-1">
|
||
|
|
{hints.map((hint) => (
|
||
|
|
<li class="text-sm text-[#8b949e] flex items-start gap-2">
|
||
|
|
<span class="text-[#79c0ff] mt-0.5">•</span>
|
||
|
|
<span>{hint}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
tr {
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
tr:hover {
|
||
|
|
background-color: #161b22;
|
||
|
|
}
|
||
|
|
td:first-child {
|
||
|
|
border-right: 1px solid #30363d;
|
||
|
|
}
|
||
|
|
</style>
|