How zettca/pacex works
PaceX is a browser-based running pace calculator. Users adjust time, distance, or speed with sliders and preset buttons; the selected value is locked while the calculator derives the other values. The route initializes and commits calculator state through URL search parameters. The sampled source supports the main interaction and calculation links; route layout and i18n wiring are represented only where the tree or README supports them.
Main entry points: Main.tsx Calculator controls · index.tsx Calculator route · App.tsx App and router · SliderPicker.tsx Slider picker
Components 17
Application shell
- React entry
src/main.tsx - App and router
src/App.tsx - Route layout
src/routes/layout.tsx
Pace calculator
- Calculator route
src/routes/index.tsx - Calculator controls
src/components/Main.tsx - Slider picker
src/components/SliderPicker.tsx - Preset buttons
src/components/SplitButton.tsx - Pace calculations
src/hooks/useCalc.ts - Slider settings
src/hooks/useSettings.ts - Slider range
src/hooks/useSliderExpand.ts - URL parameter hook
src/hooks/useSetParams.ts - Display formatting
src/utils/formats.ts
Localization
- Translation setup
src/i18n/config.ts - English translations
public/locales/en.json - Portuguese translations
public/locales/pt.json
Other components
- Runner
- Search parameters
Connections 18
- Runner → React entry: opens app
- React entry → App and router: renders
- App and router → Translation setup: initializes
- App and router → Route layout: routes to
- Route layout → Calculator route: renders route
- Search parameters → Calculator route: provides query
- Calculator route → Calculator controls: renders with state
- Calculator controls → Slider picker: renders controls
- Slider picker → Preset buttons: renders presets
- Slider picker → Slider range: manages range
- Calculator controls → Pace calculations: calculates values
- Calculator controls → Slider settings: gets settings
- Calculator controls → Display formatting: formats labels
- Calculator controls → Calculator route: commits values
- Calculator route → URL parameter hook: updates query
- URL parameter hook → Search parameters: writes parameters
- Translation setup → English translations: loads translations
- Translation setup → Portuguese translations: loads translations