| import {Check,LoaderCircle,Image} from 'lucide-react'; | |
| type State='loading'|'ready'|'error'|'idle'; | |
| export default function SelectionIndicator({state,label}:{state:State;label:string}){ | |
| return <div className="selection-indicator" data-state={state} role="status" aria-label={label}> | |
| <svg className="selection-corners" viewBox="0 0 100 100" preserveAspectRatio="none" fill="none" aria-hidden="true"><path d="M18 1H7Q1 1 1 7V18 M82 1H93Q99 1 99 7V18 M99 82V93Q99 99 93 99H82 M18 99H7Q1 99 1 93V82" vectorEffect="non-scaling-stroke"/></svg> | |
| <span className="selection-badge" aria-hidden="true">{state==='loading'?<LoaderCircle className="selection-loading-icon" size={12}/>:state==='ready'?<Check size={12}/>:<Image size={12}/>}<span>{state==='idle'||state==='error'?'Image':'3D'}</span></span> | |
| </div>; | |
| } | |