59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import styles from './SearchResultState.module.css';
|
|
|
|
interface SearchResultStateProps {
|
|
query: string;
|
|
targetCount: number;
|
|
selectedTargetIndex: number;
|
|
onReset: () => void;
|
|
onSelectTarget: (targetIndex: number) => void;
|
|
}
|
|
|
|
export function SearchResultState({
|
|
query,
|
|
targetCount,
|
|
selectedTargetIndex,
|
|
onReset,
|
|
onSelectTarget,
|
|
}: SearchResultStateProps) {
|
|
const hasMultipleTargets = targetCount > 1;
|
|
|
|
return (
|
|
<div className={styles.result} aria-live="polite">
|
|
<strong>找到你了 · {query}</strong>
|
|
<small>{hasMultipleTargets ? `找到 ${targetCount} 处` : '你在这里'}</small>
|
|
<div className={styles.resultRow}>
|
|
<button
|
|
type="button"
|
|
className={styles.ghostButton}
|
|
onClick={onReset}
|
|
>
|
|
查看全图
|
|
</button>
|
|
{hasMultipleTargets ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className={styles.ghostButton}
|
|
onClick={() => onSelectTarget(Math.max(0, selectedTargetIndex - 1))}
|
|
disabled={selectedTargetIndex === 0}
|
|
>
|
|
上一处
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={styles.ghostButton}
|
|
onClick={() => onSelectTarget(Math.min(targetCount - 1, selectedTargetIndex + 1))}
|
|
disabled={selectedTargetIndex === targetCount - 1}
|
|
>
|
|
下一处
|
|
</button>
|
|
<small className={styles.count}>
|
|
{selectedTargetIndex + 1} / {targetCount}
|
|
</small>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|