j-cli 12.9.9

A fast CLI tool for alias management, daily reports, and productivity
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
65
66
67

import type { Language } from '../../types'
import { getOrderedSections, sectionTitles } from '../../data/docs'

interface PageNavProps {
  lang: Language
  activeSection: string
  onNavigate: (section: string) => void
}

const navLabels = {
  en: { prev: 'Previous', next: 'Next' },
  zh: { prev: '上一页', next: '下一页' }
}

export function PageNav({ lang, activeSection, onNavigate }: PageNavProps) {
  const sections = getOrderedSections()
  const titles = sectionTitles[lang]
  const labels = navLabels[lang]
  const currentIndex = sections.indexOf(activeSection)
  
  const prevSection = currentIndex > 0 ? sections[currentIndex - 1] : null
  const nextSection = currentIndex < sections.length - 1 ? sections[currentIndex + 1] : null
  
  return (
    <div className="flex items-center justify-between py-8 mt-8 border-t border-stone-200">
      {/* Previous */}
      <div className="flex-1">
        {prevSection && (
          <button
            onClick={() => onNavigate(prevSection)}
            className="group flex flex-col items-start text-left hover:bg-stone-100 rounded-lg p-3 -ml-3 transition-colors"
          >
            <span className="text-xs text-stone-400 mb-1 flex items-center gap-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
              </svg>
              {labels.prev}
            </span>
            <span className="text-sm font-medium text-stone-700 group-hover:text-stone-900 transition-colors">
              {titles[prevSection]}
            </span>
          </button>
        )}
      </div>
      
      {/* Next */}
      <div className="flex-1 flex justify-end">
        {nextSection && (
          <button
            onClick={() => onNavigate(nextSection)}
            className="group flex flex-col items-end text-right hover:bg-stone-100 rounded-lg p-3 -mr-3 transition-colors"
          >
            <span className="text-xs text-stone-400 mb-1 flex items-center gap-1">
              {labels.next}
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
              </svg>
            </span>
            <span className="text-sm font-medium text-stone-700 group-hover:text-stone-900 transition-colors">
              {titles[nextSection]}
            </span>
          </button>
        )}
      </div>
    </div>
  )
}