Spaces:
Build error
Build error
File size: 2,572 Bytes
75fefa7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import { HTMLAttributes } from "react";
import Badge from "@/components/ui/shadcn/badge";
import CurvyRect from "@/components/shared/layout/curvy-rect";
import { cn } from "@/utils/cn";
type SectionHeadProps = {
children: React.ReactNode;
title: string | React.ReactNode;
titleClassName?: string;
titleShadow?: boolean;
badgeContent?: React.ReactNode;
badgeClassName?: string;
description?: React.ReactNode | string;
descriptionClassName?: string;
containerClassName?: string;
action?: React.ReactNode;
smallerHeader?: boolean;
};
export default function SectionHead({
children,
title,
titleClassName,
titleShadow = true,
badgeContent,
badgeClassName,
description,
descriptionClassName,
containerClassName,
action,
smallerHeader = false,
...attrs
}: SectionHeadProps &
Omit<HTMLAttributes<HTMLDivElement>, keyof SectionHeadProps>) {
return (
<div
{...attrs}
className={cn(
smallerHeader
? "relative py-64 lg:py-88 overflow-clip z-[1]"
: "relative py-88 lg:py-143 overflow-clip z-[1]",
attrs.className,
)}
>
<CurvyRect allSides />
<div className="h-1 bg-border-faint bottom-0 left-0 w-full absolute" />
<div className={cn("relative", containerClassName)}>
{badgeContent && (
<Badge className={cn("mx-auto px-12 pt-16", badgeClassName)}>
{badgeContent}
</Badge>
)}
<div>
<h2
className={cn(
"lg:w-max relative mx-auto text-accent-black text-title-h2 pb-8 pt-12 px-20 text-center section-head-title",
titleClassName,
)}
>
{titleShadow && (
<div
className="overlay -z-[1] p-[inherit] section-head-shadow"
aria-hidden
>
{title}
</div>
)}
{title}
</h2>
{description && (
<div
className={cn(
"section-head-title max-w-369 px-20 py-8 relative w-full mx-auto !text-black-alpha-72 text-body-large text-center mb-32 last:mb-0",
descriptionClassName,
)}
>
{description}
<div
className="overlay -z-[1] p-[inherit] section-head-shadow"
aria-hidden
>
{description}
</div>
</div>
)}
{action}
</div>
</div>
{children}
</div>
);
}
|