feat: preview panel now hoverable

SauceCode01 · SauceCode01 · commit 4a93523355e3 · 2025-12-07T14:37:02.000+08:00
diff --git a/src/app/components/CssRush/components/PreviewPane.tsx b/src/app/components/CssRush/components/PreviewPane.tsx
@@ -19,12 +19,16 @@ export function PreviewPane({ code, targetHtml }: PreviewPaneProps) {
       : `<html><body style="margin:0;padding:0;">${userCode}</body></html>`;
 
   return (
-    <div className="flex flex-col bg-gray-800/50 backdrop-blur rounded-xl p-6 border border-gray-700">
-      <h3 className="text-sm font-semibold text-gray-300 mb-3 uppercase tracking-wide">
+    <div className="flex flex-col bg-slate-900/40 backdrop-blur rounded-lg p-6 border border-slate-800">
+      <h3 className="text-sm font-semibold text-slate-300 mb-3 uppercase tracking-wide">
         {showTarget ? '🎯 Target Design' : '👁 Your Rendered Code'}
       </h3>
 
-      <div className="flex-1 relative rounded-lg overflow-hidden border-2 border-gray-700 bg-white">
+      <div
+        onMouseEnter={() => setShowTarget(true)}
+        onMouseLeave={() => setShowTarget(false)}
+        className="flex-1 relative rounded-lg overflow-hidden border border-slate-700 bg-white"
+      >
         <iframe
           key="user"
           title="User Output"
@@ -43,14 +47,6 @@ export function PreviewPane({ code, targetHtml }: PreviewPaneProps) {
           }`}
         />
       </div>
-
-      <div
-        onMouseEnter={() => setShowTarget(true)}
-        onMouseLeave={() => setShowTarget(false)}
-        className="mt-4 p-3 bg-slate-700/30 border border-slate-600 rounded-lg text-center text-slate-300 text-sm cursor-pointer hover:bg-slate-700/50 transition-colors"
-      >
-        👆 Hover here to see the target design
-      </div>
     </div>
   );
 }
diff --git a/src/app/components/targets.ts b/src/app/components/targets.ts
@@ -34,26 +34,6 @@ export const targets: Target[] = [
       '</style>',
     ]
   },
-  {
-    id: 'target-3',
-    blocks: [
-      '<div class="root">\n',
-      '  <div></div>\n',
-      '  <div></div>\n',
-      '</div>\n',
-      '<style>\n',
-      '  .root {\n',
-      '    display: flex;\ngap: 1rem;\n',
-      '  }\n',
-      '  div:nth-child(2) {\n',
-      '    background-color: #10b981;\nwidth: 4rem;\nheight: 4rem;\n',
-      '  }\n',
-      '  div:nth-child(3) {\n',
-      '    background-color: #f59e0b;\nwidth: 4rem;\nheight: 4rem;\n',
-      '  }\n',
-      '</style>',
-    ]
-  },
   {
     id: 'target-4',
     blocks: [
