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

refactor: split components to multiple subdirs

Browse source 
subdirs
- homepage
- trainingpage
- layout
This commit is contained in:
Vojtěch Mareš 2023-01-11 12:17:35 +01:00
parent 0f8f9ccb04
commit c170415fd0
15 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

117
components/trainingpage/Training.tsx Normal file
View file

@ -0,0 +1,117 @@
import Image from "next/image";
import TrainingType from "@/types/training";
import { Container } from "@/components/Container";
import { Button } from "@/components/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-black pt-16 pb-16">
<Container className="flex justify-around">
<Image
src={training.logo}
className="h-32 w-32 rounded-full"
width="1500"
height="1500"
alt=""
/>
<h2 className="ml-4 text-center font-display self-center text-4xl tracking-tight text-white sm:text-6xl">
Školení {training.name}
</h2>
</Container>
</div>
<Container>
<div className="mt-12 md:grid md:grid-cols-5 md:gap-x-4 md:gap-y-4">
<div className="md:col-span-3">
<div
className="prose prose-slate 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"
dangerouslySetInnerHTML={{ __html: training.content }}
/>
</div>
<div className="mt-8 md:col-span-2 md:mt-0">
{training.days === 2 ? (
<div className=" mb-8 rounded-lg bg-blue-50 p-4 shadow">
<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="h-5 w-5 text-blue-400"
>
<path
fillRule="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"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">
<p className="text-blue-600">
Toto školení je{" "}
<span className="font-medium">
dvoudenní.
</span>
</p>
</div>
</div>
</div>
) : (
<></>
)}
<div className="mt-8 overflow-hidden rounded-lg bg-slate-50 shadow md:mt-0">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg font-medium leading-6 text-black">
Cena za školení
</h3>
</div>
<div className="border-t border-slate-100 px-4 py-5">
<dl className="sm:divide-y sm:divide-slate-400">
<div className="py-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:py-5 sm:px-6">
<dt className="font-medium text-slate-700">
Veřejný termín
</dt>
<dd className="mt-1 text-black 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-slate-700">
Firemní školení
</dt>
<dd className="mt-1 text-black sm:mt-0">
{formatter.format(training.priceCompany)} bez DPH
</dd>
</div>
</dl>
</div>
</div>
<div className="mt-8">
<Button
variant="solid"
color="amber"
className="w-full text-lg font-medium"
href="mailto:iam@vojtechmares.com"
>
Nezávazně poptat
</Button>
</div>
</div>
</div>
</Container>
</div>
</>
);
};

135
components/trainingpage/TrainingListGrid.tsx Normal file
View file

@ -0,0 +1,135 @@
import Image from "next/image";
import clsx from "clsx";
import TrainingType from "@/types/training";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
type TrainingDetailProps = {
training: TrainingType;
className?: string;
props?: any[];
};
const TrainingDetail = ({
training,
className,
...props
}: TrainingDetailProps) => {
return (
<div
className={clsx(
className,
"rounded-3xl py-8 px-6 shadow sm:px-8",
training.featured ? "bg-amber-500 py-8" : "",
training.featured ? "hover:bg-amber-600" : "md:ring-1 md:hover:ring-slate-700 md:ring-transparent",
"transition ease-in-out duration-300 md:hover:-translate-y-1 md:hover:scale-110 "
)}
{...props}
>
<Image
src={training.logo}
className="h-32 w-32 rounded-full"
width="1500"
height="1500"
alt=""
/>
<div className="mt-6 flex justify-between">
<div className="flex">
<h3 className="font-display text-xl font-medium text-white">
{training.name}
</h3>
{training.new ? (
<>
<span className="border-1 ml-2 rounded-full border border-orange-800 bg-orange-100 px-2 py-1 text-xs font-medium text-orange-800">
new!
</span>
</>
) : (
<></>
)}
</div>
<p className="text-md max-w-2xl text-white">
{training.days} {training.days === 1 ? "den" : "dny"}
</p>
</div>
<p
className="text-md mt-4 text-slate-100"
>
{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="bg-black pt-16 pb-14 sm:pb-20 sm:pt-24 lg:pb-32"
>
<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>
</>
);
};