Initial commit

src/components/DiffViewer.astro

@@ -0,0 +1,82 @@
+---
+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>