Upload components/Header.jsx with huggingface_hub

components/Header.jsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
-import { Github, Cpu } from 'lucide-react';
+import { Github, Cpu, HelpCircle } from 'lucide-react';
 
-export default function Header() {
+export default function Header({ onOpenHelp }) {
   return (
     <header className="h-[64px] bg-panel/80 backdrop-blur-md border-b border-border flex items-center justify-between px-6 z-50 relative">
       <div className="flex items-center gap-3">
@@ -13,7 +13,16 @@ export default function Header() {
         </h1>
       </div>
 
-      <div className="flex items-center gap-6">
+      <div className="flex items-center gap-4">
+        <button 
+          onClick={onOpenHelp}
+          className="flex items-center gap-2 text-muted hover:text-primary transition-colors text-sm font-medium px-3 py-1.5 rounded hover:bg-surface/50"
+          title="Open Tutorial"
+        >
+          <HelpCircle size={16} />
+          <span className="hidden sm:inline">Tutorial</span>
+        </button>
+
         <Link 
           href="https://huggingface.co/spaces/akhaliq/anycoder" 
           target="_blank"