first commit

resources/js/Components/Product/BarcodeDisplay.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+import JsBarcode from "jsbarcode";
+
+interface BarcodeDisplayProps {
+  value: string;
+  width?: number;
+  height?: number;
+  displayValue?: boolean;
+  className?: string;
+}
+
+export default function BarcodeDisplay({
+  value,
+  width = 2,
+  height = 50,
+  displayValue = true,
+  className = "",
+}: BarcodeDisplayProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (canvasRef.current && value) {
+      try {
+        JsBarcode(canvasRef.current, value, {
+          format: "CODE128",
+          width,
+          height,
+          displayValue,
+          fontSize: 14,
+          margin: 10,
+        });
+      } catch (error) {
+        console.error("Error generating barcode:", error);
+      }
+    }
+  }, [value, width, height, displayValue]);
+
+  if (!value) {
+    return (
+      <div className={`flex items-center justify-center bg-gray-100 rounded border-2 border-dashed border-gray-300 p-4 ${className}`}>
+        <p className="text-gray-400 text-sm">尚未生成條碼</p>
+      </div>
+    );
+  }
+
+  return <canvas ref={canvasRef} className={className} />;
+}