File size: 2,059 Bytes
da957b0
 
 
 
 
 
e715c5d
da957b0
 
e715c5d
 
 
da957b0
 
 
e715c5d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
da957b0
 
 
e715c5d
da957b0
 
 
e715c5d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
da957b0
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
"use client";

export default function PageNavigator({
    currentIndex,
    totalPages,
    currentPageNumber,
    hasMentions,
    onPrevious,
    onNext,
    onJumpToMention,
    hasNextMention,
    hasPrevMention,
}) {
    return (
        <div className="page-navigator">
            <div className="page-nav-group">
                <button
                    className="btn btn-nav btn-jump"
                    onClick={() => onJumpToMention(-1)}
                    disabled={!hasPrevMention}
                    aria-label="Previous page with mentions"
                    title="Jump to previous page with data mentions"
                >

                </button>
                <button
                    className="btn btn-nav"
                    onClick={onPrevious}
                    disabled={currentIndex <= 0}
                    aria-label="Previous page"
                >
                    ← Prev
                </button>
            </div>

            <span className="page-indicator">
                Page <strong>{currentPageNumber}</strong>
                {hasMentions && <span className="mention-dot" title="This page has data mentions"></span>}
                <span className="page-count">{currentIndex + 1} / {totalPages}</span>
            </span>

            <div className="page-nav-group">
                <button
                    className="btn btn-nav"
                    onClick={onNext}
                    disabled={currentIndex >= totalPages - 1}
                    aria-label="Next page"
                >
                    Next →
                </button>
                <button
                    className="btn btn-nav btn-jump"
                    onClick={() => onJumpToMention(1)}
                    disabled={!hasNextMention}
                    aria-label="Next page with mentions"
                    title="Jump to next page with data mentions"
                >

                </button>
            </div>
        </div>
    );
}