tests/client/src/components/ServerHardware.tsx

import { useState } from 'react'
import { useHardwares, useServers } from '../hooks/swrHooks'
import { Autocomplete, CloseButton, Loader, Table } from '@mantine/core'
import { IServer } from '../interfaces/servers'

export default function ServerHardware() {
    const [selectedOption, setSelectedOption] = useState<number | undefined>(undefined)
    const { servers } = useServers()

    const { hardwares, isLoading: serversLoading } = useHardwares(selectedOption, 0, 10)

    const hardwareColumns = [
        { field: 'id', headerName: 'ID', type: 'number' },
        { field: 'name', headerName: 'Название', type: 'string' },
        { field: 'server_id', headerName: 'Server ID', type: 'number' },
        { field: 'servername', headerName: 'Название сервера', type: 'string' },
        { field: 'os_info', headerName: 'ОС', type: 'string' },
        { field: 'ram', headerName: 'ОЗУ', type: 'string' },
        { field: 'processor', headerName: 'Проц.', type: 'string' },
        { field: 'storages_count', headerName: 'Кол-во хранилищ', type: 'number' },
    ]

    return (
        <>
            <form>
                <Autocomplete
                    placeholder="Сервер"
                    flex={'1'}
                    data={servers ? servers.map((item: IServer) => ({ label: item.name, value: item.id.toString() })) : []}
                    onSelect={(e) => console.log(e.currentTarget.value)}
                    //onChange={(value) => setSearch(value)}
                    onOptionSubmit={(value) => setSelectedOption(Number(value))}
                    rightSection={
                        //search !== '' && 
                        (
                            <CloseButton
                                size="sm"
                                onMouseDown={(event) => event.preventDefault()}
                                onClick={() => {
                                    //setSearch('')
                                    setSelectedOption(undefined)
                                }}
                                aria-label="Clear value"
                            />
                        )
                    }
                //value={search}
                />
            </form>

            {serversLoading ?
                <Loader />
                :
                <Table highlightOnHover>
                    <Table.Thead>
                        <Table.Tr>
                            {hardwareColumns.map(column => (
                                <Table.Th key={column.field}>{column.headerName}</Table.Th>
                            ))}
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        <Table.Tr>
                            {hardwareColumns.map(column => (
                                <Table.Td key={column.field}>{hardwares ? hardwares[column.field] : ''}</Table.Td>
                            ))}
                        </Table.Tr>
                    </Table.Tbody>
                </Table>
            }
        </>
    )
}