import { type FunctionComponent } from 'react'; import { useAppLayout } from '@/app-layout'; import { useColumns } from '@/hooks'; import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from '@/icons'; import { RESULTS_COLUMN_WIDTH } from '@/parameters'; import { ResultColumnId } from '@/types'; import { HeaderButton } from './HeaderButton'; import styles from './Results.module.scss'; export const Header: FunctionComponent = () => { const { resultWordWidth } = useAppLayout(); const columns = useColumns(); return (
{columns[ResultColumnId.Coordinates] && ( )} {columns[ResultColumnId.Word] && ( )} {columns[ResultColumnId.TilesCount] && ( )} {columns[ResultColumnId.VowelsCount] && ( )} {columns[ResultColumnId.ConsonantsCount] && ( )} {columns[ResultColumnId.BlanksCount] && ( )} {columns[ResultColumnId.WordsCount] && ( )} {columns[ResultColumnId.Points] && ( )}
); };