Upload components/CategorySidebar.jsx with huggingface_hub

components/CategorySidebar.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { 
+  Grid, 
+  Sandwich, 
+  Coffee, 
+  Pizza, 
+  IceCream, 
+  Salad, 
+  Dessert, 
+  Juice,
+  MoreHorizontal
+} from 'lucide-react';
+
+const CategorySidebar = ({ 
+  activeCategory, 
+  onCategorySelect, 
+  isOpen,
+  onClose
+}) => {
+  const categories = [
+    { id: 'all', name: 'ทั้งหมด', icon: Grid },
+    { id: 'food', name: 'อาหาร', icon: Sandwich },
+    { id: 'drink', name: 'เครื่องดื่ม', icon: Coffee },
+    { id: 'fastfood', name: 'ฟาสต์ฟู้ด', icon: Pizza },
+    { id: 'dessert', name: 'ของหวาน', icon: Dessert },
+    { id: 'healthy', name: 'สุขภาพ', icon: Salad },
+    { id: 'icecream', name: 'ไอศกรีม', icon: IceCream },
+    { id: 'juice', name: 'น้ำผลไม้', icon: Juice },
+  ];
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={onClose}
+        />
+      )}
+      
+      <aside 
+        className={`
+          fixed md:static left-0 top-0 h-full bg-white border-r border-pos-border
+          w-64 transform transition-transform duration-300 ease-in-out z-50
+          ${isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
+        `}
+      >
+        <div className="flex flex-col h-full">
+          <div className="p-4 border-b border-pos-border flex justify-between items-center">
+            <h2 className="text-lg font-bold text-pos-text">หมวดหมู่สินค้า</h2>
+            <button onClick={onClose} className="md:hidden p-2 hover:bg-pos-bg rounded-lg">
+              <MoreHorizontal className="w-5 h-5 text-pos-text-secondary" />
+            </button>
+          </div>
+          
+          <div className="flex-1 overflow-y-auto p-2">
+            <div className="space-y-1">
+              {categories.map((category) => {
+                const Icon = category.icon;
+                const isActive = activeCategory === category.id;
+                
+                return (
+                  <button
+                    key={category.id}
+                    onClick={() => {
+                      onCategorySelect(category.id);
+                      if (window.innerWidth < 768) onClose();
+
+                    className={`
+                      w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
+                      ${isActive 
+                        ? 'bg-primary-600 text-white shadow-lg shadow-primary-200' 
+                        : 'hover:bg-pos-bg text-pos-text'
+                      }
+                    `}
+                  >
+                    <Icon className={`w-5 h-5 ${isActive ? 'text-white' : 'text-pos-text-secondary'}`} />
+                    <span className="font-medium">{category.name}</span>
+                  </button>
+                );
+              })}
+            </div>
+            
+            <div className="mt-6 px-4">
+              <div className="bg-primary-50 p-4 rounded-xl">
+                <h3 className="text-sm font-semibold text-primary-800 mb-2">โปรโมชั่นพิเศษ</h3>
+                <p className="text-xs text-primary-600 mb-3">ซื้อ 2 ชิ้ง ลด 10%</p>
+                <div className="w-full bg-primary-200 rounded-full h-1.5 mb-2">
+                  <div className="bg-primary-600 rounded-full h-1.5 w-3/4"></div>
+                </div>
+                <p className="text-xs text-primary-600">90% ของสินค้ามีส่วนลด</p>
+              </div>
+            </div>
+          </div>
+          
+          <div className="p-4 border-t border-pos-border">
+            <button className="w-full py-3 rounded-xl border border-primary-600 text-primary-600 font-medium hover:bg-primary-50 transition-colors">
+              จัดการหมวดหมู่
+            </button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+};
+
+export default CategorySidebar;