fedisearch/application/src/components/node/NodeHeader.tsx

import React, { ReactElement } from 'react'
import { NodeQueryInput, NodeSortingByEnum } from '../../graphql/generated/types'
import SortToggle from '../SortToggle'

export default function NodeHeader ({ query, onSortToggle }: {
  query: NodeQueryInput
  onSortToggle: (sortBy: NodeSortingByEnum) => void
}): ReactElement {
  return (
        <thead>
        <tr>
            <th rowSpan={2}>
                <SortToggle onToggle={onSortToggle} field={'domain'} sort={query}>
                    Domain
                </SortToggle>
            </th>
            <th rowSpan={2}>
                <SortToggle onToggle={onSortToggle} field={'softwareName'} sort={query}>
                    Software
                </SortToggle>
            </th>
            <th colSpan={4}>User count</th>
            <th rowSpan={2} className={'number-cell'}>
                <SortToggle onToggle={onSortToggle} field={'statusesCount'} sort={query}>
                    Statuses
                </SortToggle>
            </th>
            <th rowSpan={2}>
                <SortToggle onToggle={onSortToggle} field={'openRegistrations'} sort={query}>
                    Registrations
                </SortToggle>
            </th>
            <th rowSpan={2}>
                <SortToggle onToggle={onSortToggle} field={'refreshedAt'} sort={query}>
                    Last refreshed
                </SortToggle>
            </th>
        </tr>
        <tr>
            <th className={'text-end'}>
                <SortToggle onToggle={onSortToggle} field={'totalUserCount'} sort={query}>
                    Total
                </SortToggle>
            </th>
            <th className={'text-end'}>
                <SortToggle onToggle={onSortToggle} field={'accountFeedCount'} sort={query}>
                    Indexed
                </SortToggle>
            </th>
            <th className={'text-end'}>
                <SortToggle onToggle={onSortToggle} field={'monthActiveUserCount'} sort={query}>
                    Month active
                </SortToggle>
            </th>
            <th className={'text-end'}>
                <SortToggle onToggle={onSortToggle} field={'halfYearActiveUserCount'} sort={query}>
                    Half year active
                </SortToggle>
            </th>
        </tr>
        </thead>
  )
}