Initial: pi-skill — 68 skills, 43 extensions, 11 themes for Pi

skills/scripts/templates/src/components/layout/Header.astro

@@ -0,0 +1,113 @@
+---
+const navLinks = [
+  { href: '/products', label: 'สินค้า' },
+  { href: '/vendors', label: 'ร้านค้า' },
+];
+
+const currentPath = Astro.url.pathname;
+---
+
+<header class="bg-white shadow-sm sticky top-0 z-40">
+  <div class="container mx-auto px-4">
+    <div class="flex items-center justify-between h-16">
+      <!-- Logo -->
+      <a href="/" class="flex items-center gap-2">
+        <span class="text-2xl font-bold text-blue-600">ร้านของเรา</span>
+      </a>
+      
+      <!-- Desktop Nav -->
+      <nav class="hidden md:flex items-center gap-6">
+        {navLinks.map(link => (
+          <a 
+            href={link.href} 
+            class={`text-gray-600 hover:text-blue-600 transition-colors ${
+              currentPath.startsWith(link.href) ? 'text-blue-600 font-medium' : ''
+            }`}
+          >
+            {link.label}
+          </a>
+        ))}
+      </nav>
+      
+      <!-- Search -->
+      <div class="hidden md:flex flex-1 max-w-md mx-8">
+        <form action="/products" method="GET" class="w-full">
+          <div class="relative">
+            <input 
+              type="search" 
+              name="q"
+              placeholder="ค้นหาสินค้า..." 
+              class="w-full border border-gray-200 rounded-lg pl-10 pr-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+            <svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </div>
+        </form>
+      </div>
+      
+      <!-- Actions -->
+      <div class="flex items-center gap-4">
+        <!-- Wishlist -->
+        <a href="/wishlist" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+          <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+          </svg>
+        </a>
+        
+        <!-- Account -->
+        <a href="/account" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+          <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        </a>
+        
+        <!-- Cart (handled by CartBadge) -->
+        <div id="cart-button"></div>
+      </div>
+      
+      <!-- Mobile Menu Button -->
+      <button class="md:hidden p-2 hover:bg-gray-100 rounded-lg" id="mobile-menu-btn">
+        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+    </div>
+    
+    <!-- Mobile Menu -->
+    <div class="md:hidden hidden" id="mobile-menu">
+      <div class="py-4 space-y-2">
+        <form action="/products" method="GET" class="px-2 pb-4">
+          <input 
+            type="search" 
+            name="q"
+            placeholder="ค้นหาสินค้า..." 
+            class="w-full border border-gray-200 rounded-lg px-4 py-2"
+          />
+        </form>
+        {navLinks.map(link => (
+          <a 
+            href={link.href} 
+            class={`block px-4 py-2 ${
+              currentPath.startsWith(link.href) ? 'text-blue-600 bg-blue-50' : 'text-gray-600'
+            }`}
+          >
+            {link.label}
+          </a>
+        ))}
+        <hr class="my-2" />
+        <a href="/wishlist" class="block px-4 py-2 text-gray-600">สินค้าที่ชอบ</a>
+        <a href="/account" class="block px-4 py-2 text-gray-600">บัญชีของฉัน</a>
+      </div>
+    </div>
+  </div>
+</header>
+
+<script>
+  const menuBtn = document.getElementById('mobile-menu-btn');
+  const menu = document.getElementById('mobile-menu');
+  
+  menuBtn?.addEventListener('click', () => {
+    menu?.classList.toggle('hidden');
+  });
+</script>