freezer/mareshq-backoffice-v1-monolith
Archived
1
0
Fork 0
Code Activity

feat(pages): add 'training/[slug]' page with detail

Browse source
This commit is contained in:
Vojtěch Mareš 2023-06-26 22:27:49 +02:00
parent be651d1b9f
commit b91d83a5d7
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
4 changed files with 1036 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

954
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -21,9 +21,11 @@
"next-auth": "^4.22.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "^8.0.7",
"zod": "^3.21.4"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
"@types/eslint": "^8.37.0",
"@types/node": "^18.16.0",
"@types/prettier": "^2.7.2",

92
src/pages/training/[slug].tsx Normal file
View file

@ -0,0 +1,92 @@
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:&nbsp;{formatCurrency(training.priceOpen)}, Corporate:&nbsp;{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>
</>
);
}

4
tailwind.config.ts
View file

@ -5,5 +5,7 @@ export default {
theme: {
extend: {},
},
plugins: [],
plugins: [
require('@tailwindcss/typography'),
],
} satisfies Config;