pomo-tui/dist/app.js

> A beautiful terminal-based Pomodoro timer built with React Ink

import React, { useEffect, useState } from 'react';
import { Box, Text, useApp } from 'ink';
import Gradient from 'ink-gradient';
import BigText from 'ink-big-text';
import SelectInput from 'ink-select-input';
import { Timer } from './timer.js';
import StopWatch from './stopwatch.js';
import { Pomodoro } from './pomodoro.js';
function SideBar({ navItems, onSelect }) {
    return (React.createElement(Box, { height: '100%', width: '100%', flexDirection: 'column', alignItems: "center", justifyContent: "center", borderStyle: "double", paddingX: 2, paddingY: 1 },
        React.createElement(SelectInput, { items: navItems, onSelect: onSelect, itemComponent: ({ label, isSelected }) => (React.createElement(Text, null,
                React.createElement(Gradient, { name: "retro" },
                    React.createElement(Text, null,
                        isSelected ? '❯' : ' ',
                        " ",
                        label)))) })));
}
const navItems = [
    { label: '🏠 Welcome', value: 'welcome' },
    { label: '⏱️ Timer', value: 'timer' },
    { label: '⏰ Stopwatch', value: 'stopwatch' },
    { label: '🍅 Pomodoro', value: 'pomodoro' },
    { label: '🚪 Exit', value: 'exit' },
];
export default function App() {
    const [currentNavItem, setCUrrentNavItem] = useState(navItems[0]);
    const [isTimerActive, setIsTimerActive] = useState(false);
    const { exit } = useApp();
    const onNavItemSlected = (item) => {
        if (item.value === 'exit' && !isTimerActive) {
            exit();
        }
        else if (!isTimerActive) {
            setCUrrentNavItem(item);
        }
    };
    useEffect(() => {
        console.log('comp mounted');
    }, []);
    return (React.createElement(MainLayout, null,
        currentNavItem?.value === 'welcome' && React.createElement(ContentWelcome, null),
        currentNavItem?.value === 'timer' && (React.createElement(ContentPaneOne, { onActiveChange: setIsTimerActive })),
        currentNavItem?.value === 'stopwatch' && (React.createElement(ContentPaneTwo, { onActiveChange: setIsTimerActive })),
        currentNavItem?.value === 'pomodoro' && (React.createElement(Box, { height: '100%', width: '100%', flexDirection: 'column', alignItems: "center", justifyContent: "center" },
            React.createElement(Pomodoro, { onActiveChange: setIsTimerActive }))),
        !isTimerActive && (React.createElement(SideBar, { navItems: navItems, onSelect: onNavItemSlected }))));
}
function MainLayout({ children }) {
    return React.createElement(Box, null, children);
}
function ContentWelcome() {
    return (React.createElement(Box, { height: '100%', width: '100%', flexDirection: 'column', paddingLeft: 4, paddingRight: 4, paddingTop: 3 },
        React.createElement(Gradient, { name: 'retro' },
            React.createElement(BigText, { text: 'Pomo-tui', font: "tiny" }))));
}
function ContentPaneOne({ onActiveChange, }) {
    return (React.createElement(Box, { height: '100%', width: '100%', flexDirection: 'column', alignItems: "center", justifyContent: "center" },
        React.createElement(Timer, { onActiveChange: onActiveChange, showStopTime: true })));
}
function ContentPaneTwo({ onActiveChange, }) {
    return (React.createElement(Box, { height: '100%', width: '100%', flexDirection: 'column', alignItems: "center", justifyContent: "center" },
        React.createElement(StopWatch, { onActiveChange: onActiveChange })));
}