mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-16 18:52:12 +03:00
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
import styles from "./HomeSection.module.css";
|
|
|
|
type HomeSectionProps = {
|
|
bg: string;
|
|
slantCurrent?: "up" | "down" | "none";
|
|
slantBefore?: "up" | "down" | "none";
|
|
slantAfter?: "up" | "down" | "none";
|
|
gradient?: string;
|
|
hiddenOnMobile?: boolean;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export const HomeSection = ({
|
|
bg,
|
|
slantCurrent = "none",
|
|
slantBefore = "none",
|
|
slantAfter = "none",
|
|
gradient,
|
|
hiddenOnMobile = false,
|
|
className,
|
|
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
|
|
className={cn(
|
|
`${bg} w-screen ${flex} ${slantBeforeFix} ${slantAfterFix} ${slant} overflow-hidden`,
|
|
className
|
|
)}
|
|
>
|
|
<section className="flex flex-col items-center w-full max-w-6xl z-[2] py-8">
|
|
{children}
|
|
</section>
|
|
{gradient !== undefined ? (
|
|
<div
|
|
className={`absolute w-screen bottom-[calc(100vw*tan(6deg)-1px)] left-0 h-[30%] ${gradient}`}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|