import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
const SearchBar = ({ onSearch }) => {
const [searchTerm, setSearchTerm] = useState('');
const [showScanner, setShowScanner] = useState(false);
const handleSearch = () => {
onSearch(searchTerm);
};
const handleScan = (result) => {
if (result) {
// Kết quả quét QR được lưu trong result.text
const scannedId = result.text;
console.log("Đã quét mã QR, ID:", scannedId);
// Cập nhật searchTerm với ID đã quét
setSearchTerm(scannedId);
// Tự động thực hiện tìm kiếm với ID đã quét
onSearch(scannedId);
// Đóng scanner
setShowScanner(false);
// Nếu bạn muốn chuyển hướng ngay lập tức đến trang có ID đó
// window.location.href = `/artifact/${scannedId}`;
}
};
const handleScanError = (error) => {
console.error("Lỗi khi quét mã QR:", error);
};
return (
setSearchTerm(e.target.value)}
placeholder="Tìm kiếm hiện vật..."
style={{
padding: '10px',
width: '300px',
borderRadius: '5px 0 0 5px',
border: '1px solid #ccc',
fontSize: '16px',
outline: 'none'
}}
/>
{showScanner && (
Đặt mã QR vào ô quét