49 lines
1.2 KiB
Text
49 lines
1.2 KiB
Text
---
|
|
export interface Props {
|
|
bgClass?: string;
|
|
containerClass?: string;
|
|
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "6xl" | "8xl";
|
|
py?: string;
|
|
reverseOnMobile?: boolean;
|
|
}
|
|
|
|
const {
|
|
bgClass = "",
|
|
containerClass = "",
|
|
maxWidth = "8xl",
|
|
py = "py-8 md:py-12",
|
|
reverseOnMobile = false,
|
|
} = Astro.props;
|
|
|
|
const maxWidthClasses = {
|
|
sm: "max-w-sm",
|
|
md: "max-w-md",
|
|
lg: "max-w-lg",
|
|
xl: "max-w-xl",
|
|
"2xl": "max-w-2xl",
|
|
"4xl": "max-w-4xl",
|
|
"6xl": "max-w-6xl",
|
|
"8xl": "max-w-8xl",
|
|
};
|
|
---
|
|
|
|
<section class={`${bgClass} ${py}`}>
|
|
<div
|
|
class={`${maxWidthClasses[maxWidth]} mx-auto grid grid-cols-1 lg:grid-cols-[1fr_640px_1fr] items-center md:items-start gap-8 px-4 ${containerClass}`}
|
|
>
|
|
<!-- Left Column (Hidden on mobile, visible on desktop) -->
|
|
<div class={`${reverseOnMobile ? "order-3 lg:order-1" : "order-1"}`}>
|
|
<slot name="left" />
|
|
</div>
|
|
|
|
<!-- Center Column (Main content) -->
|
|
<div class={`order-1 lg:order-2`}>
|
|
<slot name="center" />
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class={`${reverseOnMobile ? "order-1 lg:order-3" : "order-3"}`}>
|
|
<slot name="right" />
|
|
</div>
|
|
</div>
|
|
</section>
|