81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { X, ArrowDownCircle, ArrowUpCircle, Trash2 } from 'lucide-react';
|
|
import Scanner from '@/components/Scanner';
|
|
import NewItemDialog from '@/components/NewItemDialog';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
interface ScannerSectionProps {
|
|
mode: string;
|
|
onModeChange: (mode: string) => void;
|
|
showScanner: boolean;
|
|
onShowScanner: (show: boolean) => void;
|
|
onScanSuccess: (result: any) => void;
|
|
onOCRMatch: (result: any) => void;
|
|
onAddItemClick: () => void;
|
|
}
|
|
|
|
export default function ScannerSection({
|
|
mode,
|
|
onModeChange,
|
|
showScanner,
|
|
onShowScanner,
|
|
onScanSuccess,
|
|
onOCRMatch,
|
|
onAddItemClick,
|
|
}: ScannerSectionProps) {
|
|
return (
|
|
<div className="w-full px-1 space-y-3 md:space-y-4">
|
|
{/* Mode Switcher */}
|
|
<div className="flex p-1.5 bg-surface shadow-inner w-full gap-1">
|
|
{[
|
|
{ id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
|
|
{ id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
|
|
{ id: 'TRASH', label: 'Trash', icon: Trash2 }
|
|
].map((m) => (
|
|
<button
|
|
key={m.id}
|
|
data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
|
|
onClick={() => onModeChange(m.id)}
|
|
className={cn(
|
|
"flex-1 py-3.5 text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-3",
|
|
mode === m.id ? "bg-surface-container text-primary shadow-lg ring-1 ring-primary/20" : "text-secondary hover:text-foreground"
|
|
)}
|
|
>
|
|
<m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
|
|
<span className="truncate">{m.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Scanner Section */}
|
|
<section className="glass-card p-6">
|
|
{showScanner ? (
|
|
<div className="space-y-2 md:space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-lg font-normal">scanning...</h2>
|
|
<button
|
|
onClick={() => onShowScanner(false)}
|
|
className="p-2.5 bg-surface border border-outline/30 text-secondary hover:text-error transition-all active:scale-95"
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
<Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
|
|
</div>
|
|
) : (
|
|
<NewItemDialog
|
|
onScannerClick={() => onShowScanner(true)}
|
|
onAddItemClick={onAddItemClick}
|
|
/>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|