2023-10-18 16:21:15 +03:00
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
|
2023-10-17 11:57:27 +03:00
|
|
|
import styles from "./HomeSection.module.css";
|
|
|
|
|
|
|
|
type HomeSectionProps = {
|
|
|
|
bg: string;
|
|
|
|
slantCurrent?: "up" | "down" | "none";
|
|
|
|
slantBefore?: "up" | "down" | "none";
|
|
|
|
slantAfter?: "up" | "down" | "none";
|
|
|
|
hiddenOnMobile?: boolean;
|
|
|
|
children: React.ReactNode;
|
2023-10-18 16:21:15 +03:00
|
|
|
className?: string;
|
2023-10-17 11:57:27 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
export const HomeSection = ({
|
|
|
|
bg,
|
|
|
|
slantCurrent = "none",
|
|
|
|
slantBefore = "none",
|
|
|
|
slantAfter = "none",
|
|
|
|
hiddenOnMobile = false,
|
2023-10-18 16:21:15 +03:00
|
|
|
className,
|
2023-10-17 11:57:27 +03:00
|
|
|
children,
|
|
|
|
}: HomeSectionProps): JSX.Element => {
|
|
|
|
const slantBeforeFix = styles[`slant-before-is-${slantBefore}`] ?? "";
|
|
|
|
const slantAfterFix = styles[`slant-after-is-${slantAfter}`] ?? "";
|
|
|
|
const flex = hiddenOnMobile
|
|
|
|
? "hidden md:flex md:justify-center"
|
|
|
|
: "flex justify-center";
|
|
|
|
const slant = styles[`section-slanted-${slantCurrent}wards`] ?? "";
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2023-10-18 16:21:15 +03:00
|
|
|
className={cn(
|
|
|
|
`${bg} w-screen ${flex} ${slantBeforeFix} ${slantAfterFix} ${slant}`,
|
|
|
|
className
|
|
|
|
)}
|
2023-10-17 11:57:27 +03:00
|
|
|
>
|
2023-10-18 16:21:15 +03:00
|
|
|
<section className="flex flex-col items-center w-full max-w-6xl z-[2] py-8">
|
2023-10-17 11:57:27 +03:00
|
|
|
{children}
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|