import { ComponentChild, ComponentChildren, h } from 'preact'; import { useCallback, useState } from 'preact/hooks'; import cs from 'classnames'; import styles from './css/Tabs.module.css'; export interface TabProps { children: ComponentChildren; } export const Tab = ({ children }: TabProps) => { return (
{children}
); }; interface TabWrapperProps { children: ComponentChild; onClick: () => void; selected: boolean; } const TabWrapper = ({ children, onClick, selected }: TabWrapperProps) => { return (
{children}
); }; 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 (
{children.map((child, idx) => innerSetSelected(idx)} selected={idx === innerSelected} > {child} )}
); };