65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
|
import { useState } from 'react';
|
||
|
|
import Button from '../ui/Button';
|
||
|
|
import Modal from '../ui/Modal';
|
||
|
|
|
||
|
|
const SCANNER_TIPS = [
|
||
|
|
{ lead: 'Good lighting', body: 'avoid glare on foil cards.' },
|
||
|
|
{ lead: 'Fill the frame', body: 'with one card; keep corners visible.' },
|
||
|
|
{ lead: 'Hold still', body: 'until Auto-detect locks the match.' },
|
||
|
|
{ lead: 'Use Batch Scan', body: 'for a pile of photos from your gallery.' },
|
||
|
|
{ lead: 'Switch camera', body: 'if the image is dark or mirrored.' },
|
||
|
|
];
|
||
|
|
|
||
|
|
function LightbulbIcon() {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
className="h-5 w-5"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ScannerTips({ className = '' }) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
className={className}
|
||
|
|
leadingIcon={<LightbulbIcon />}
|
||
|
|
onClick={() => setOpen(true)}
|
||
|
|
>
|
||
|
|
Scanner Tips
|
||
|
|
</Button>
|
||
|
|
<Modal
|
||
|
|
open={open}
|
||
|
|
onClose={() => setOpen(false)}
|
||
|
|
title="Scanner Tips"
|
||
|
|
size="md"
|
||
|
|
>
|
||
|
|
<ol className="space-y-4 text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||
|
|
{SCANNER_TIPS.map((tip) => (
|
||
|
|
<li key={tip.lead}>
|
||
|
|
<strong style={{ color: 'var(--text-primary)' }}>{tip.lead}</strong>
|
||
|
|
{' — '}
|
||
|
|
{tip.body}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ol>
|
||
|
|
</Modal>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|