92 lines
4.6 KiB
TypeScript
92 lines
4.6 KiB
TypeScript
import ReactMarkdown from 'react-markdown';
|
|
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 (context) => {
|
|
const trainingSlug = context.query.slug as string;
|
|
const training = await prisma.training.findUnique({ where: { slug: trainingSlug }});
|
|
|
|
if (!training) return { notFound: true };
|
|
|
|
return { props: { training: training } };
|
|
}
|
|
|
|
function Detail({ training }: { training: any }) {
|
|
return (
|
|
<div className="overflow-hidden bg-white shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
|
|
<div className="px-4 py-6 sm:px-6">
|
|
<h3 className="text-base font-semibold leading-7 text-gray-900">Training</h3>
|
|
{/* <p className="mt-1 max-w-2xl text-sm leading-6 text-gray-500">Personal details and application.</p> */}
|
|
</div>
|
|
<div className="border-t border-gray-100">
|
|
<dl className="divide-y divide-gray-100">
|
|
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">backoffice ID</dt>
|
|
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><code>{training.id}</code></dd>
|
|
</div>
|
|
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">Name</dt>
|
|
<dd className="mt-1 text-sm leading-6 font-medium text-gray-900 sm:col-span-2 sm:mt-0">{training.name}</dd>
|
|
</div>
|
|
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">Days</dt>
|
|
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{training.days}</dd>
|
|
</div>
|
|
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">Draft</dt>
|
|
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{training.draft ? 'Yes' : 'No'}</dd>
|
|
</div>
|
|
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">Logo</dt>
|
|
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{training.logoURL}</dd>
|
|
</div>
|
|
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">Repository</dt>
|
|
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><Link href={training.repositoryURL} className="text-black underline">{training.repositoryURL}</Link></dd>
|
|
</div>
|
|
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">Price</dt>
|
|
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">Open: {formatCurrency(training.priceOpen)}, Corporate: {formatCurrency(training.priceCorporate)}</dd>
|
|
</div>
|
|
{/* <div className="px-4 py-6 sm:grid sm:grid-cols-2 sm:gap-4 sm:px-6">
|
|
<dt className="text-sm font-medium text-gray-900">Content</dt>
|
|
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-1 sm:mt-0">
|
|
<div className="prose prose:text-black prose-p:text-slate-700 prose-h1:text-2xl prose-h1:font-medium prose-h2:text-xl prose-h2:font-medium prose-h3:text-lg prose-h3:font-medium prose-li:my-0">
|
|
<ReactMarkdown>
|
|
{training.content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</dd>
|
|
</div> */}
|
|
<div className="mx-auto px-4 py-6 sm:gap-4 sm:px-6 prose prose:text-black prose-p:text-slate-700 prose-h1:text-2xl prose-h1:font-medium prose-h2:text-xl prose-h2:font-medium prose-h3:text-lg prose-h3:font-medium prose-li:my-0">
|
|
<ReactMarkdown>
|
|
{training.content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Training({ training }: { training: Training }) {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Training | MaresHQ backoffice</title>
|
|
</Head>
|
|
<Layout>
|
|
{/* { JSON.stringify(trainings) } */}
|
|
<Detail training={training} />
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|