Implement wizard-style scanner with auto-scanning (Part 1)
🧙♂️ Scanner Wizard Components: - ScanModeSelector: Choose between 4 scan modes with beautiful UI • Add to Database, Search Collections, Price Check, Deck Building • Hover effects and responsive grid layout • Pro tips section with usage guidance 📷 Auto-Scanning Camera: - AutoScanningCamera: 2-3 second stabilization with countdown - Simulated card detection every 2 seconds - 5-second minimum between scans to prevent rapid scanning - Queue counter (0/100) and duplicate detection - Manual scan fallback button 🎯 Scanning Toast: - Top-aligned toast notification matching screenshot style - Progress bar during stabilization countdown - Different states: scanning, processing, success, error - Smooth slide-down animation ✨ Features: - Queue management up to 100 cards - Recent scan deduplication (keeps last 10) - Visual feedback with scanning overlay - Image caching with canvas capture - Error handling and recovery Next: Card queue review stage with bulk operations
This commit is contained in:
Randall Stillwell
parent
24535e4e26
commit
8209566451
4 changed files with 540 additions and 0 deletions
351
src/components/scanner/AutoScanningCamera.tsx
Normal file
351
src/components/scanner/AutoScanningCamera.tsx
Normal file
|
|
@ -0,0 +1,351 @@
|
||||||
|
import React, { useRef, useState, useEffect, useCallback } from 'react';
|
||||||
|
import ScanningToast from './ScanningToast';
|
||||||
|
import { aiCardOCR, type CardOCRResult } from '../../services/aiOcr';
|
||||||
|
|
||||||
|
interface ScannedCard {
|
||||||
|
id: string;
|
||||||
|
cardData: CardOCRResult;
|
||||||
|
imageDataUrl: string;
|
||||||
|
timestamp: number;
|
||||||
|
queuePosition: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AutoScanningCameraProps {
|
||||||
|
onCardScanned: (card: ScannedCard) => void;
|
||||||
|
onError: (error: string) => void;
|
||||||
|
isActive: boolean;
|
||||||
|
maxQueueSize?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
|
||||||
|
onCardScanned,
|
||||||
|
onError,
|
||||||
|
isActive,
|
||||||
|
maxQueueSize = 100
|
||||||
|
}) => {
|
||||||
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
const streamRef = useRef<MediaStream | null>(null);
|
||||||
|
const scanTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
const lastScanTimeRef = useRef<number>(0);
|
||||||
|
|
||||||
|
const [isStreaming, setIsStreaming] = useState(false);
|
||||||
|
const [scanState, setScanState] = useState<{
|
||||||
|
isScanning: boolean;
|
||||||
|
isProcessing: boolean;
|
||||||
|
message: string;
|
||||||
|
countdown: number;
|
||||||
|
}>({
|
||||||
|
isScanning: false,
|
||||||
|
isProcessing: false,
|
||||||
|
message: '',
|
||||||
|
countdown: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const [queueCount, setQueueCount] = useState(0);
|
||||||
|
const [recentScans, setRecentScans] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
// Initialize camera
|
||||||
|
useEffect(() => {
|
||||||
|
if (isActive) {
|
||||||
|
startCamera();
|
||||||
|
} else {
|
||||||
|
stopCamera();
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
stopCamera();
|
||||||
|
};
|
||||||
|
}, [isActive]);
|
||||||
|
|
||||||
|
// Auto-scan detection
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isStreaming || !isActive) return;
|
||||||
|
|
||||||
|
const detectCardStabilization = () => {
|
||||||
|
if (scanState.isProcessing || queueCount >= maxQueueSize) return;
|
||||||
|
|
||||||
|
// Clear existing timeout
|
||||||
|
if (scanTimeoutRef.current) {
|
||||||
|
clearTimeout(scanTimeoutRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start countdown
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
isScanning: true,
|
||||||
|
message: 'Card detected, stabilizing...',
|
||||||
|
countdown: 3
|
||||||
|
}));
|
||||||
|
|
||||||
|
let countdown = 3;
|
||||||
|
const countdownInterval = setInterval(() => {
|
||||||
|
countdown--;
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
countdown,
|
||||||
|
message: countdown > 0 ? `Scanning in ${countdown}...` : 'Scanning card...'
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (countdown <= 0) {
|
||||||
|
clearInterval(countdownInterval);
|
||||||
|
triggerScan();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
// Set timeout for actual scan
|
||||||
|
scanTimeoutRef.current = setTimeout(() => {
|
||||||
|
clearInterval(countdownInterval);
|
||||||
|
triggerScan();
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Simulate card detection (in real implementation, this would use computer vision)
|
||||||
|
const detectionInterval = setInterval(() => {
|
||||||
|
// Only trigger if enough time has passed since last scan (prevent rapid scanning)
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - lastScanTimeRef.current > 5000) { // 5 second minimum between scans
|
||||||
|
detectCardStabilization();
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(detectionInterval);
|
||||||
|
if (scanTimeoutRef.current) {
|
||||||
|
clearTimeout(scanTimeoutRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [isStreaming, isActive, scanState.isProcessing, queueCount, maxQueueSize]);
|
||||||
|
|
||||||
|
const startCamera = async () => {
|
||||||
|
try {
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
video: {
|
||||||
|
facingMode: 'environment',
|
||||||
|
width: { ideal: 1920 },
|
||||||
|
height: { ideal: 1080 }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (videoRef.current) {
|
||||||
|
videoRef.current.srcObject = stream;
|
||||||
|
streamRef.current = stream;
|
||||||
|
|
||||||
|
videoRef.current.onloadedmetadata = () => {
|
||||||
|
videoRef.current?.play().then(() => {
|
||||||
|
setIsStreaming(true);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('Camera error:', err);
|
||||||
|
onError(`Camera access failed: ${err.message}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopCamera = () => {
|
||||||
|
if (streamRef.current) {
|
||||||
|
streamRef.current.getTracks().forEach(track => track.stop());
|
||||||
|
streamRef.current = null;
|
||||||
|
}
|
||||||
|
setIsStreaming(false);
|
||||||
|
setScanState({
|
||||||
|
isScanning: false,
|
||||||
|
isProcessing: false,
|
||||||
|
message: '',
|
||||||
|
countdown: 0
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const captureImage = useCallback((): string | null => {
|
||||||
|
if (!videoRef.current || !canvasRef.current) return null;
|
||||||
|
|
||||||
|
const video = videoRef.current;
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
if (!ctx) return null;
|
||||||
|
|
||||||
|
// Set canvas dimensions to match video
|
||||||
|
canvas.width = video.videoWidth;
|
||||||
|
canvas.height = video.videoHeight;
|
||||||
|
|
||||||
|
// Draw current video frame to canvas
|
||||||
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Return image data URL
|
||||||
|
return canvas.toDataURL('image/jpeg', 0.8);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const triggerScan = useCallback(async () => {
|
||||||
|
if (scanState.isProcessing || queueCount >= maxQueueSize) return;
|
||||||
|
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
isScanning: false,
|
||||||
|
isProcessing: true,
|
||||||
|
message: 'Processing card with AI...',
|
||||||
|
countdown: 0
|
||||||
|
}));
|
||||||
|
|
||||||
|
try {
|
||||||
|
const imageDataUrl = captureImage();
|
||||||
|
if (!imageDataUrl) {
|
||||||
|
throw new Error('Failed to capture image');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process with AI OCR
|
||||||
|
const cardData = await aiCardOCR.analyzeCard(imageDataUrl);
|
||||||
|
|
||||||
|
// Create unique ID for this scan
|
||||||
|
const cardId = `scan_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||||
|
|
||||||
|
// Check for recent duplicates (simple hash of card name)
|
||||||
|
const cardHash = (cardData.cardName || 'unknown').toLowerCase().replace(/\s+/g, '');
|
||||||
|
const isRecentDuplicate = recentScans.has(cardHash);
|
||||||
|
|
||||||
|
if (isRecentDuplicate) {
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
isProcessing: false,
|
||||||
|
message: `Duplicate detected: ${cardData.cardName || 'Unknown Card'}`,
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
// Add to recent scans (keep last 10)
|
||||||
|
setRecentScans(prev => {
|
||||||
|
const newSet = new Set(prev);
|
||||||
|
newSet.add(cardHash);
|
||||||
|
if (newSet.size > 10) {
|
||||||
|
const firstKey = newSet.values().next().value;
|
||||||
|
newSet.delete(firstKey);
|
||||||
|
}
|
||||||
|
return newSet;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create scanned card
|
||||||
|
const scannedCard: ScannedCard = {
|
||||||
|
id: cardId,
|
||||||
|
cardData,
|
||||||
|
imageDataUrl,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
queuePosition: queueCount + 1
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add to queue
|
||||||
|
onCardScanned(scannedCard);
|
||||||
|
setQueueCount(prev => prev + 1);
|
||||||
|
lastScanTimeRef.current = Date.now();
|
||||||
|
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
isProcessing: false,
|
||||||
|
message: `Added: ${cardData.cardName || 'Unknown Card'}`,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear message after 2 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
message: '',
|
||||||
|
}));
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Scan processing error:', error);
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
isProcessing: false,
|
||||||
|
message: 'Scan failed, try again',
|
||||||
|
}));
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setScanState(prev => ({
|
||||||
|
...prev,
|
||||||
|
message: '',
|
||||||
|
}));
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}, [captureImage, onCardScanned, queueCount, maxQueueSize, recentScans, scanState.isProcessing]);
|
||||||
|
|
||||||
|
const manualScan = () => {
|
||||||
|
if (!scanState.isProcessing && queueCount < maxQueueSize) {
|
||||||
|
triggerScan();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
{/* Scanning Toast */}
|
||||||
|
<ScanningToast
|
||||||
|
isVisible={scanState.isScanning || scanState.isProcessing || !!scanState.message}
|
||||||
|
message={scanState.message}
|
||||||
|
progress={scanState.isScanning ? ((3 - scanState.countdown) / 3) * 100 : undefined}
|
||||||
|
type={scanState.isProcessing ? 'processing' : scanState.message.includes('Added:') ? 'success' : 'scanning'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Camera Preview */}
|
||||||
|
<div className="relative bg-black rounded-lg overflow-hidden">
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
autoPlay
|
||||||
|
playsInline
|
||||||
|
muted
|
||||||
|
className="w-full h-auto max-h-96 object-cover"
|
||||||
|
style={{ minHeight: '300px' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Scan Guide Overlay */}
|
||||||
|
{isStreaming && (
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
{/* Card frame guide */}
|
||||||
|
<div className="absolute inset-4 border-2 border-white border-dashed rounded-lg flex items-center justify-center">
|
||||||
|
<div className="bg-black bg-opacity-50 text-white px-4 py-2 rounded-lg text-sm text-center">
|
||||||
|
<div className="font-medium">Position card within this area</div>
|
||||||
|
<div className="text-xs opacity-75">Auto-scan in 2-3 seconds</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Queue counter */}
|
||||||
|
<div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||||
|
Queue: {queueCount}/{maxQueueSize}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scanning indicator */}
|
||||||
|
{scanState.isScanning && (
|
||||||
|
<div className="absolute inset-0 bg-blue-500 bg-opacity-20 border-2 border-blue-500 rounded-lg animate-pulse" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Placeholder when not streaming */}
|
||||||
|
{!isStreaming && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div className="text-white text-center">
|
||||||
|
<div className="text-4xl mb-2">📹</div>
|
||||||
|
<div className="font-medium">Starting Camera...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hidden canvas for image capture */}
|
||||||
|
<canvas ref={canvasRef} className="hidden" />
|
||||||
|
|
||||||
|
{/* Manual scan button */}
|
||||||
|
{isStreaming && (
|
||||||
|
<div className="mt-4 text-center">
|
||||||
|
<button
|
||||||
|
onClick={manualScan}
|
||||||
|
disabled={scanState.isProcessing || queueCount >= maxQueueSize}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-6 py-2 rounded-lg font-medium transition-colors"
|
||||||
|
>
|
||||||
|
{scanState.isProcessing ? 'Processing...' : 'Manual Scan'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AutoScanningCamera;
|
||||||
89
src/components/scanner/ScanModeSelector.tsx
Normal file
89
src/components/scanner/ScanModeSelector.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ScanMode {
|
||||||
|
id: 'add-to-database' | 'search-collections' | 'price-check' | 'deck-building';
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: string;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ScanModeSelectorProps {
|
||||||
|
onModeSelect: (mode: ScanMode['id']) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ScanModeSelector: React.FC<ScanModeSelectorProps> = ({ onModeSelect }) => {
|
||||||
|
const scanModes: ScanMode[] = [
|
||||||
|
{
|
||||||
|
id: 'add-to-database',
|
||||||
|
title: 'Add Cards to Database',
|
||||||
|
description: 'Scan new cards and add them to your collections',
|
||||||
|
icon: '📚',
|
||||||
|
color: 'bg-blue-500 hover:bg-blue-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'search-collections',
|
||||||
|
title: 'Search Collections',
|
||||||
|
description: 'Find these cards in your existing collections',
|
||||||
|
icon: '🔍',
|
||||||
|
color: 'bg-green-500 hover:bg-green-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'price-check',
|
||||||
|
title: 'Price Check',
|
||||||
|
description: 'Get real-time pricing for your cards',
|
||||||
|
icon: '💰',
|
||||||
|
color: 'bg-yellow-500 hover:bg-yellow-600'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'deck-building',
|
||||||
|
title: 'Deck Building',
|
||||||
|
description: 'Scan cards directly into a deck with legality checks',
|
||||||
|
icon: '🎯',
|
||||||
|
color: 'bg-purple-500 hover:bg-purple-600'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto p-6">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">Card Scanner</h1>
|
||||||
|
<p className="text-gray-600">Choose your scanning mode to get started</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{scanModes.map((mode) => (
|
||||||
|
<button
|
||||||
|
key={mode.id}
|
||||||
|
onClick={() => onModeSelect(mode.id)}
|
||||||
|
className={`${mode.color} text-white p-6 rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 text-left`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<div className="text-3xl">{mode.icon}</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-xl font-semibold mb-2">{mode.title}</h3>
|
||||||
|
<p className="text-white/90 text-sm leading-relaxed">
|
||||||
|
{mode.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 text-center">
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4 text-sm text-gray-600">
|
||||||
|
<p className="font-medium mb-2">💡 Pro Tips:</p>
|
||||||
|
<ul className="space-y-1 text-left max-w-md mx-auto">
|
||||||
|
<li>• Position cards clearly within the camera frame</li>
|
||||||
|
<li>• Scanner will auto-detect cards after 2-3 seconds</li>
|
||||||
|
<li>• You can scan up to 100 cards in a single session</li>
|
||||||
|
<li>• Duplicates are allowed and will be tracked separately</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScanModeSelector;
|
||||||
84
src/components/scanner/ScanningToast.tsx
Normal file
84
src/components/scanner/ScanningToast.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ScanningToastProps {
|
||||||
|
isVisible: boolean;
|
||||||
|
message: string;
|
||||||
|
progress?: number; // 0-100 for progress bar
|
||||||
|
type?: 'scanning' | 'processing' | 'success' | 'error';
|
||||||
|
}
|
||||||
|
|
||||||
|
const ScanningToast: React.FC<ScanningToastProps> = ({
|
||||||
|
isVisible,
|
||||||
|
message,
|
||||||
|
progress,
|
||||||
|
type = 'scanning'
|
||||||
|
}) => {
|
||||||
|
if (!isVisible) return null;
|
||||||
|
|
||||||
|
const getTypeStyles = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'scanning':
|
||||||
|
return 'bg-blue-600 text-white';
|
||||||
|
case 'processing':
|
||||||
|
return 'bg-purple-600 text-white';
|
||||||
|
case 'success':
|
||||||
|
return 'bg-green-600 text-white';
|
||||||
|
case 'error':
|
||||||
|
return 'bg-red-600 text-white';
|
||||||
|
default:
|
||||||
|
return 'bg-blue-600 text-white';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getIcon = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'scanning':
|
||||||
|
return '📷';
|
||||||
|
case 'processing':
|
||||||
|
return '🤖';
|
||||||
|
case 'success':
|
||||||
|
return '✅';
|
||||||
|
case 'error':
|
||||||
|
return '❌';
|
||||||
|
default:
|
||||||
|
return '📷';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 animate-slide-down">
|
||||||
|
<div className={`${getTypeStyles()} rounded-lg shadow-lg px-4 py-3 min-w-80 max-w-md`}>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
{/* Icon */}
|
||||||
|
<div className="text-lg">{getIcon()}</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="font-medium text-sm">{message}</div>
|
||||||
|
|
||||||
|
{/* Progress bar */}
|
||||||
|
{progress !== undefined && (
|
||||||
|
<div className="mt-2">
|
||||||
|
<div className="w-full bg-white/20 rounded-full h-1.5">
|
||||||
|
<div
|
||||||
|
className="bg-white h-1.5 rounded-full transition-all duration-300 ease-out"
|
||||||
|
style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Spinner for scanning/processing */}
|
||||||
|
{(type === 'scanning' || type === 'processing') && (
|
||||||
|
<div className="w-5 h-5">
|
||||||
|
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScanningToast;
|
||||||
|
|
@ -2,6 +2,22 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* Custom animations */
|
||||||
|
@keyframes slide-down {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-slide-down {
|
||||||
|
animation: slide-down 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
/* Import custom card effects */
|
/* Import custom card effects */
|
||||||
@import './styles/cardEffects.css';
|
@import './styles/cardEffects.css';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue