apple2js/js/components/Tabs.tsx

import { ComponentChild, ComponentChildren, h } from 'preact';
import { useCallback, useState } from 'preact/hooks';
import cs from 'classnames';

import styles from './css/Tabs.module.scss';

export interface TabProps {
    children: ComponentChildren;
}

export const Tab = ({ children }: TabProps) => {
    return <div>{children}</div>;
};

interface TabWrapperProps {
    children: ComponentChild;
    onClick: () => void;
    selected: boolean;
}

const TabWrapper = ({ children, onClick, selected }: TabWrapperProps) => {
    return (
        <div
            onClick={onClick}
            className={cs(styles.tab, { [styles.selected]: selected })}
        >
            {children}
        </div>
    );
};

export interface TabsProps {
    children: ComponentChildren;
    setSelected: (selected: number) => void;
}

export const Tabs = ({ children, setSelected }: TabsProps) => {
    const [innerSelected, setInnerSelected] = useState(0);

    const innerSetSelected = useCallback(
        (idx: number) => {
            setSelected(idx);
            setInnerSelected(idx);
        },
        [setSelected]
    );

    if (!Array.isArray(children)) {
        return null;
    }

    return (
        <div className={styles.tabs}>
            {children.map((child, idx) => (
                <TabWrapper
                    key={idx}
                    onClick={() => innerSetSelected(idx)}
                    selected={idx === innerSelected}
                >
                    {child}
                </TabWrapper>
            ))}
        </div>
    );
};