u-fit/frontend/pages/admin/training/index.tsx

import Link from 'next/link'
import { useTrainingsQuery } from '../../../src/gql'
import { AdminPage } from '../../../src/app'

const TrainingsList = () => {
  const { data, error, loading } = useTrainingsQuery()

  return (
    <AdminPage>
      <section>
        {error && <p>Error loading trainings...</p>}
        {loading && <p>Loading data...</p>}
        {data && data.trainings.length > 0 ? (
          <ul>
            {data?.trainings.map((training) => (
              <li key={training.id}>
                <button type='button'>Delete</button>
                <Link href='training/[id]' as={`training/${training.id}`}>
                  <a>{training.title}</a>
                </Link>
              </li>
            ))}
          </ul>
        ) : (
          <p>No trainings found.</p>
        )}
        <Link href='training/create'>
          <a>Create training</a>
        </Link>

        <style jsx>{`
          li {
            list-style: none;
          }
          ul {
            padding: 0;
          }
        `}</style>
      </section>
    </AdminPage>
  )
}

export default TrainingsList