vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

feat: add training list page, training page and markdown content

Browse source
This commit is contained in:
Vojtěch Mareš 2022-12-19 00:04:15 +01:00
parent 3dd584fcf4
commit e19dbb71cd
16 changed files with 586 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/Footer.tsx
View file

@ -31,24 +31,21 @@ export function Footer() {
</ul>
</div>
<div>
{/* <h3 className="text-lg font-medium">Most favorite courses</h3>
<h3 className="text-lg font-medium">Nejblíbenější školení</h3>
<ul className="mt-4 list-disc pl-4">
<li>
<Link href="#" className="underline">Kubernetes</Link>
<Link href="/skoleni/kubernetes" className="underline">Kubernetes</Link>
</li>
{/* <li>
<Link href="/skoleni/gitlab-ci" className="underline">GitLab CI</Link>
</li> */}
<li>
<Link href="#" className="underline">GitLab CI</Link>
<Link href="/skoleni/terraform" className="underline">Terraform</Link>
</li>
<li>
<Link href="#" className="underline">Docker</Link>
</li>
<li>
<Link href="#" className="underline">Terraform</Link>
</li>
<li>
<Link href="#" className="underline">Rancher</Link>
</li>
</ul> */}
{/* <li>
<Link href="/skoleni/rancher" className="underline">Rancher</Link>
</li> */}
</ul>
</div>
<div>
<h3 className="text-lg font-medium">Důležité odkazy</h3>

84
components/Training.tsx Normal file
View file

@ -0,0 +1,84 @@
import Image from "next/image"
import TrainingType from "@/types/training"
import { Container } from "./Container"
import { Button } from "./Button"
type Props = {
training: TrainingType
}
export const Training = ({ training }: Props) => {
const formatter = new Intl.NumberFormat('cs', { style: 'currency', currency: 'CZK', maximumFractionDigits: 0})
return (
<>
<div className="pb-14 sm:pb-20 lg:pb-32">
<div className="bg-slate-900 pt-16 pb-16">
<Container className="flex justify-around">
<Image src={training.logo} className="h-40 w-40 rounded-full" width="1500" height="1500" alt="" />
<h2 className="font-display text-4xl tracking-tight text-white sm:text-6xl self-center">
Školení {training.name}
</h2>
</Container>
</div>
<Container>
<div className="md:grid md:grid-cols-5 md:gap-x-4 md:gap-y-4 mt-12">
<div className="md:col-span-3">
<div className="prose prose-slate prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h1:font-medium prose-h2:font-medium prose-h3:font-medium prose-li:my-0" dangerouslySetInnerHTML={{ __html: training.content }} />
</div>
<div className="md:col-span-2 mt-8 md:mt-0">
{ training.days === 2 ? (
<div className=" bg-blue-50 p-4 rounded-lg shadow mb-8">
<div className="flex">
<div className="flex-shrink-0">
{/* <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" /> */}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5 text-blue-400">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
</svg>
</div>
<div className="ml-3">
<p className="text-blue-700">
Toto školení je{' '}
<span className="font-medium text-blue-700">
dvoudenní.
</span>
</p>
</div>
</div>
</div>
) : <></>}
<div className="overflow-hidden bg-slate-50 shadow rounded-lg mt-8 md:mt-0">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg font-medium leading-6 text-slate-900" >Cena za školení</h3>
</div>
<div className="border-t border-gray-200 px-4 py-5">
<dl className="sm:divide-y sm:divide-gray-200">
<div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
<dt className="font-medium text-gray-500">Veřejný termín</dt>
<dd className="mt-1 text-gray-900 sm:mt-0">{formatter.format(training.priceOpen)} bez DPH</dd>
</div>
<div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
<dt className="font-medium text-gray-500">Firemní školení</dt>
<dd className="mt-1 text-gray-900 sm:mt-0">{formatter.format(training.priceCompany)} bez DPH</dd>
</div>
</dl>
</div>
</div>
<div className="mt-8">
<Button
variant="solid"
color="blue"
className="w-full text-lg font-medium"
href="mailto:iam@vojtechmares.com"
>
Nezávazně poptat
</Button>
</div>
</div>
</div>
</Container>
</div>
</>
)
}

117
components/TrainingListGrid.tsx Normal file
View file

@ -0,0 +1,117 @@
import Image from "next/image"
import clsx from "clsx"
import TrainingType from "@/types/training"
import { Container } from "./Container"
import { Button } from "./Button"
type TrainingDetailProps = {
training: TrainingType,
className?: string,
props?: any[],
}
const TrainingDetail = ({ training, className, ...props }: TrainingDetailProps) => {
return (
<div
className={
clsx(className,
"rounded-3xl shadow py-8 px-6 sm:px-8",
training.featured ? 'bg-blue-600 py-8' : ''
)
}
{...props}
>
<Image src={training.logo} className="h-32 w-32 rounded-full" width="1500" height="1500" alt="" />
<div className="flex justify-between mt-6">
<div className="flex">
<h3
className="text-xl font-display font-medium text-white"
>
{training.name}
</h3>
{ training.new ? (
<>
<span className="ml-2 rounded-full bg-orange-100 px-2 py-1 text-xs font-medium text-orange-800 border border-1 border-orange-800">
new!
</span>
</>
) : <></> }
</div>
<p className="max-w-2xl text-md text-white">{training.days}{' '}{training.days === 1 ? 'den' : 'dny'}</p>
</div>
<p className={
clsx(
"mt-4 text-md",
training.featured ? 'text-white' : 'text-slate-200'
)}
>
{training.description.split(" ").splice(0,40).join(" ") + "..."}
</p>
<Button
href={"/skoleni/" + training.slug}
variant={training.featured ? 'solid' : 'outline'}
color="white"
className="mt-8 w-full"
>
Zjistit více
</Button>
</div>
)
}
type TrainingListProps = {
trainingList: TrainingType[]
}
const TrainingListMobile = ({ trainingList }: TrainingListProps) => {
return (
<div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden sm:-mx-6 sm:px-6 lg:hidden">
{trainingList.map((training) => (
<div key={training.slug} className={clsx(training.featured ? 'order-first lg:order-none' : '')}>
<TrainingDetail training={training} className="mx-auto max-w-2xl" />
</div>
))}
</div>
)
}
const TrainingListDesktop = ({ trainingList }: TrainingListProps) => {
return (
<div className="hidden lg:mt-20 lg:block">
<div className="grid grid-cols-3 gap-x-8 gap-y-8"
>
{trainingList.map((training) => (
<div key={training.slug} className={clsx(training.featured ? 'order-first lg:order-none' : '')}>
<TrainingDetail training={training} className="relative" />
</div>
))}
</div>
</div>
)
}
export const TrainingListGrid = ({ trainingList }: TrainingListProps) => {
return (
<>
<section
id="training-list"
aria-label="Seznam školení"
className="pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32 bg-slate-900"
>
<Container>
<div className="mx-auto max-w-2xl md:text-center">
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
Moje školení
</h2>
<p className="mt-4 text-lg tracking-tight text-slate-400">
Od veřejného cloudu přes on-premise až po serverless, se vším vám poradím.
</p>
</div>
<TrainingListMobile trainingList={trainingList} />
<TrainingListDesktop trainingList={trainingList} />
</Container>
</section>
</>
)
}