Upload components/QuickNumberPad.jsx with huggingface_hub

components/QuickNumberPad.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Minus, Plus, Check, X } from 'lucide-react';
+
+const QuickNumberPad = ({ 
+  onNumberClick, 
+  onClear, 
+  onBackspace,
+  onEnter,
+  displayValue,
+  showClear = true,
+  showBackspace = true
+}) => {
+  return (
+    <div className="grid grid-cols-3 gap-2 max-w-[250px] mx-auto">
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+        <button
+          key={num}
+          onClick={() => onNumberClick(num.toString())}
+          className="h-12 bg-white border border-pos-border rounded-xl hover:bg-primary-50 hover:border-primary-300 hover:text-primary-600 transition-all font-bold text-lg"
+        >
+          {num}
+        </button>
+      ))}
+      
+      {showClear && (
+        <button
+          onClick={onClear}
+          className="h-12 bg-danger/10 text-danger border border-danger/20 rounded-xl hover:bg-danger hover:text-white transition-all font-medium"
+        >
+          ล้าง
+        </button>
+      )}
+      
+      <button
+        onClick={() => onNumberClick('0')}
+        className="h-12 bg-white border border-pos-border rounded-xl hover:bg-primary-50 hover:border-primary-300 hover:text-primary-600 transition-all font-bold text-lg"
+      >
+        0
+      </button>
+      
+      {showBackspace && (
+        <button
+          onClick={onBackspace}
+          className="h-12 bg-warning/10 text-warning border border-warning/20 rounded-xl hover:bg-warning hover:text-white transition-all"
+        >
+          <Minus className="w-5 h-5 mx-auto" />
+        </button>
+      )}
+      
+      <button
+        onClick={onEnter}
+        className="h-12 bg-success text-white border border-success rounded-xl hover:bg-success/90 transition-all flex items-center justify-center"
+      >
+        <Check className="w-6 h-6" />
+      </button>
+    </div>
+  );
+};
+
+export default QuickNumberPad;