feat: add /trainings page

- list of trainings
- add button (taken from github: vojtechmares/website)
- add currency formatter

src/pages/trainings.tsx

@@ -0,0 +1,114 @@
+import { GetServerSideProps } from "next";
+import Head from "next/head";
+import Link from "next/link";
+
+import { formatCurrency } from "~/lib/currency/formatter";
+
+import { prisma } from "~/server/db";
+import { Training } from "lib/content/training";
+import { Layout } from "~/components/Layout";
+import { Button } from "~/components/Button";
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+  const trainings = await prisma.training.findMany({
+    select: {
+      id: true,
+      name: true,
+      days: true,
+      draft: true,
+      priceOpen: true,
+      priceCorporate: true,
+    }
+  });
+  return { props: { trainings: trainings } };
+}
+
+function Table({trainings}: { trainings: Training[] }) {
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="sm:flex sm:items-center">
+        <div className="sm:flex-auto">
+          <h1 className="text-base font-semibold leading-6 text-gray-900">Trainings</h1>
+          {/* <p className="mt-2 text-sm text-gray-700">
+            A list of all the users in your account including their name, title, email and role.
+          </p> */}
+        </div>
+        <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+          {/* <button
+            type="button"
+            className="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            Add user
+          </button> */}
+          <Button href="https://github.com/vojtechmares/backoffice/new/main/content/training">
+            Add training
+          </Button>
+        </div>
+      </div>
+      <div className="mt-8 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                      Name
+                    </th>
+                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Days
+                    </th>
+                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Draft
+                    </th>
+                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Price Open
+                    </th>
+                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                      Price Corporate
+                    </th>
+                    <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                      <span className="sr-only">Edit</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 bg-white">
+                  {trainings.map((training) => (
+                    <tr key={training.id}>
+                      <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                        {training.name}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{training.days}</td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{training.draft ? 'Yes' : 'No'}</td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{formatCurrency(training.priceOpen)}</td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{formatCurrency(training.priceCorporate)}</td>
+                      <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                        <Link href={"/trainings/" + training.id} className="text-black underline">
+                          Detail<span className="sr-only"> of {training.name}</span>
+                        </Link>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function Training({ trainings }: { trainings: Training[] }) {
+  return (
+    <>
+      <Head>
+        <title>Training | MaresHQ backoffice</title>
+      </Head>
+      <Layout>
+        {/* { JSON.stringify(trainings) } */}
+        <Table trainings={trainings} />
+      </Layout>
+    </>
+  );
+}